/* ============================================================
   Pyluk UI — compact, content-first shell
   ============================================================ */

:root, [data-theme="dark"] {
    color-scheme: dark;
    /* Page → Card → Input — каждый уровень светлее предыдущего */
    --bg-0: #1a1a1c;  --bg-1: #232328;  --bg-2: #2c2c32;  --bg-3: #36363e;
    --border: #36363e;  --border-soft: #2c2c32;
    --text: #ebebef;  --text-dim: #a8a8b2;  --text-mute: #76767e;
    /* Tailwind-inspired semantic colors */
    --accent:  #60a5fa;  --accent-soft:  rgba(96,165,250,0.12);  --accent-border:  rgba(96,165,250,0.40);
    --success: #34d399;  --success-soft: rgba(52,211,153,0.12);  --success-border: rgba(52,211,153,0.40);
    --info:    var(--accent);  --info-soft: var(--accent-soft);  --info-border: var(--accent-border); --info-fg-on: #ffffff;
    --warn:    #fbbf24;  --warn-soft:    rgba(251,191,36,0.12);  --warn-border:    rgba(251,191,36,0.40);
    /* Контрастный текст для использования НА сплошной --warn заливке
       (chip-update, plinpos). Темная тема: --warn=#fbbf24 ярко-жёлтый →
       нужен тёмный текст. */
    --warn-fg-on:    #1a1a1a;
    --danger:  #f87171;  --danger-soft:  rgba(248,113,113,0.12); --danger-border:  rgba(248,113,113,0.40);
    /* Domain semantics used by incident episodes in the Feed. */
    --episode: #38bdf8; --episode-text: #7dd3fc; --episode-soft: rgba(56,189,248,0.10); --episode-border: rgba(56,189,248,0.25);
    --series:  #a78bfa; --series-text:  #c4b5fd; --series-soft:  rgba(167,139,250,0.10); --series-border:  rgba(167,139,250,0.25);
    /* Primary = синий accent */
    --btn-primary-bg: #3b82f6;  --btn-primary-fg: #ffffff;  --btn-primary-bg-hover: #60a5fa;
    /* Нулевая, но синтаксически полноценная тень. Значение `none` нельзя
       использовать первым элементом составного box-shadow у stack-N:
       браузер тогда отбрасывает и декоративные нижние слои карточки. */
    --shadow-card: 0 0 0 0 transparent;
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.28);
    --focus-ring: var(--accent);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a8a8b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5 1.5 6 6 10.5 1.5'/%3E%3C/svg%3E");
}

[data-theme="light"] {
    color-scheme: light;
    /* ИНВЕРСИЯ: page серее, card серое-светлое, input/icon — БЕЛЫЕ (popped) */
    --bg-0: #e8e8ed;  --bg-1: #f3f3f6;  --bg-2: #ffffff;  --bg-3: #ebebf0;
    --border: #dadae0;  --border-soft: #e3e3e8;
    --text: #1a1a1e;  --text-dim: #65656e;  --text-mute: #9a9aa3;
    --accent:  #2563eb;  --accent-soft:  rgba(37,99,235,0.08);   --accent-border:  rgba(37,99,235,0.30);
    --success: #059669;  --success-soft: rgba(5,150,105,0.08);   --success-border: rgba(5,150,105,0.30);
    --info:    var(--accent);  --info-soft: var(--accent-soft);  --info-border: var(--accent-border); --info-fg-on: #ffffff;
    --warn:    #b45309;  --warn-soft:    rgba(180,83,9,0.08);    --warn-border:    rgba(180,83,9,0.30);
    /* Светлая тема: --warn=#b45309 тёмно-коричневый → нужен светлый текст. */
    --warn-fg-on: #ffffff;
    --danger:  #dc2626;  --danger-soft:  rgba(220,38,38,0.07);   --danger-border:  rgba(220,38,38,0.30);
    --episode: #0284c7; --episode-text: #0369a1; --episode-soft: rgba(2,132,199,0.08); --episode-border: rgba(2,132,199,0.28);
    --series:  #7c3aed; --series-text:  #6d28d9; --series-soft:  rgba(124,58,237,0.08); --series-border:  rgba(124,58,237,0.28);
    --btn-primary-bg: #2563eb;  --btn-primary-fg: #ffffff;  --btn-primary-bg-hover: #1d4ed8;
    --shadow-card: 0 0 0 0 transparent;
    --shadow-lg: 0 8px 24px rgba(20,22,36,0.10);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239a9aa3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5 1.5 6 6 10.5 1.5'/%3E%3C/svg%3E");
}

:root {
    /* Цвет перекрашенных верхних слоёв стопки (data-update-layers) когда
       у published-кластера есть post-publish raw_items. Сама карточка
       при этом светится жёлтым (var(--warn)) — это разные сигналы:
         • жёлтый бок/фон — «эта карточка получила обновление»
         • коричневые низы — «сколько из видимых низов это новые материалы»
       Одинаковый цвет в темной и светлой темах. */
    --post-update-accent: #593A13;
    --radius-sm: 4px;  --radius: 6px;  --radius-lg: 8px;
    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
    --font-mono:  'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --media-overlay-bg: rgba(0, 0, 0, .68);
    --media-overlay-text: #fff;

    /* Единая типографическая шкала. Компоненты и Tailwind utilities читают
       одни и те же значения вместо локальных почти одинаковых размеров. */
    --type-2xs: 10px;
    --type-xs: 11px;
    --type-sm: 12px;
    --type-ui: 12.5px;
    --type-body: 13.5px;
    --type-md: 14px;
    --type-lg: 16px;
    --type-section: 18px;
    --type-title: 20px;
    --type-page: 24px;
    --type-display: 28px;
    --type-brand: 34px;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Backwards-compat aliases */
    --accent-bg:   var(--accent-soft);
    --accent-bord: var(--accent);
    --accent-text: var(--btn-primary-fg);
    --accent-deep: var(--accent);
    --accent-hi:   var(--accent);
    --accent-glow: var(--accent-soft);
    --danger-bg:   var(--danger-soft);
    --danger-bd:   var(--danger-border);
    --warn-bg:     var(--warn-soft);
    --warn-bd:     var(--warn-border);
    --info-bg:     var(--info-soft);
    --info-bd:     var(--info-border);
    --success-bg:  var(--success-soft);
    --success-bd:  var(--success-border);
    --bg-elev:     var(--bg-2);

    /* Compatibility aliases for older page-local styles. Keep the aliases
       theme-aware instead of letting var(--token) invalidate a declaration. */
    --bg:          var(--bg-2);
    --bg-soft:     var(--bg-2);
    --bg-hover:    var(--bg-3);
    --surface:     var(--bg-1);
    --surface-2:   var(--bg-2);
    --ok:          var(--success);
    --warning:     var(--warn);
    --bad:         var(--danger);
    --text-100:    var(--text);
    --text-300:    var(--text-dim);
    --text-faint:  var(--text-mute);
    --text-soft:   var(--text-dim);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0; padding: 0;
    background: var(--bg-0); color: var(--text);
    font-family: var(--font-sans); font-size: var(--type-body); line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .18s, color .18s;
    /* CSS scroll anchoring: браузер сам удерживает позицию относительно
       видимого элемента при удалении нод выше viewport. Решает scroll-jump
       при HTMX outerHTML swap карточек в Ленте — особенно на мобиле, где
       раньше после действия с карточкой страница «подскакивала» вверх.
       Default value, но прописываем явно — на случай если глобальный
       reset где-то выставит overflow-anchor: none. */
    overflow-anchor: auto;
}

/* Universal focus ring */
:where(button, a, input, select, textarea, [role="switch"], [role="checkbox"], [tabindex]):focus { outline: none; }
:where(button, a, input, select, textarea, [role="switch"], [role="checkbox"], [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection { background: var(--accent-soft); color: var(--text); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   HTMX / Alpine системные
   ============================================================ */
[x-cloak] { display: none !important; }

.htmx-indicator { opacity: 0; transition: opacity .15s ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }
/* htmx-swapping: лёгкий fade-out перед заменой контента. Раньше было
   opacity .55 → на телефоне выглядело как «мигание-моргание». Сейчас
   почти незаметно (.85), но всё ещё даёт визуальный сигнал. */
.htmx-swapping { opacity: 0.85; transition: opacity .08s; }
/* htmx-settling: fade-in нового контента. Уменьшил с .14s до .08s и
   убрал translateY(2px) — он на телефоне читался как «прыжок» при
   каждом swap-е. Чистый opacity-переход не дёргает layout. */
.htmx-settling { animation: fadeIn .08s ease-out; }
.fade-in { animation: fadeIn .14s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.app-loading-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, transparent), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: loading-stripe 1.05s linear infinite;
    /* Above every custom modal/map overlay, below the global toast layer. */
    z-index: 2147482990;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}
.app-loading-bar.is-visible { opacity: 1; }
@keyframes loading-stripe {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}

/* ============================================================
   Card / Panel / Empty
   ============================================================ */
.card, .app-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow-card);
}
.app-card.selected { border-color: var(--accent); }
.panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.empty {
    text-align: center;
    padding: 48px 18px;
    color: var(--text-dim);
}
.empty .emoji { font-size: var(--type-brand); opacity: .55; margin-bottom: 8px; display: block; }

/* Пустое состояние внутри карточки/секции. Большая .empty выше остаётся
   для самостоятельных страниц, этот вариант — для компактных областей. */
.empty-state {
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-mute);
    font-size: var(--type-body);
    line-height: 1.45;
}
.empty-state--centered { text-align: center; }
.empty-state--spacious { padding: 40px 16px; }
.empty-state--bare { border: 0; background: transparent; }
.empty-state__icon {
    display: block;
    margin-bottom: 4px;
    color: var(--text-mute);
    opacity: .6;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: var(--type-body);
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text);
    cursor: pointer;
    transition: .15s;
    font-family: inherit;
    letter-spacing: -0.005em;
    user-select: none;
}
.btn:hover:not(:disabled) { background: var(--bg-2); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Тумблер-кнопка во «включённом» состоянии (Группировать / Компактно). */
.btn.is-active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--text); }

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border-color: var(--btn-primary-bg);
}
.btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-fg);
}

.btn-ghost {
    background: transparent; border-color: transparent;
    color: var(--text-dim);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--bg-2); color: var(--text);
}

.btn-danger { color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--bg-2); }

.btn-sm   { height: 32px; min-height: 32px; padding: 5px 12px; font-size: var(--type-sm); }
.btn-xs   { padding: 4px 10px; font-size: var(--type-xs); }
.btn > svg,
.btn > span > svg { width: 16px; height: 16px; }
.btn-icon {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 999px;
}
.btn-icon svg { width: 14px; height: 14px; }

/* ============================================================
   Form controls
   ============================================================ */
.input, .select, .textarea {
    width: 100%;
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 7px 11px;
    color: var(--text);
    font-size: var(--type-body);
    outline: none;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input, .select {
    min-height: 36px;
    line-height: 20px;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--text-mute); }
.input:disabled, .select:disabled, .textarea:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    background-color: var(--bg-1);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"],
.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}
.input-sm, .select-sm {
    height: 32px;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: var(--type-ui);
    line-height: 20px;
}
.select-sm { padding-right: 28px; background-position: right 10px center; }
.input-lg, .select-lg {
    min-height: 46px;
    padding: 11px 14px;
    border-radius: var(--radius-lg);
    font-size: var(--type-lg);
    line-height: 22px;
}
.select-lg { padding-right: 36px; background-position: right 14px center; }
.input--file { padding: 4px; }
.textarea {
    resize: vertical; min-height: 90px; line-height: 1.55;
    font-family: var(--font-sans); font-size: var(--type-body);
}
/* У42: визуальная блокировка textarea во время LLM-генерации.
   Раньше readonly textarea выглядела так же, как обычная — редактор
   пытался печатать и фрустрировался («нажимаю — ничего не происходит»).
   Теперь полупрозрачная штриховка наглядно говорит «не трогать». */
.textarea.textarea-locked,
.textarea[readonly] {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 14px,
        rgba(127, 127, 127, 0.08) 14px,
        rgba(127, 127, 127, 0.08) 15px
    );
    cursor: not-allowed;
    opacity: 0.78;
}

/* Custom <select> — own chevron */
.select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    padding-right: 32px;
    cursor: pointer;
}
.select::-ms-expand { display: none; }
.select option { background: var(--bg-1); color: var(--text); }

/* Поле с общей встроенной иконкой. Размер задаётся самому контролу через
   input-sm/select-sm/default, поэтому поиск и select выглядят одинаково. */
.control-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.control-icon > svg,
.control-icon > .control-icon__icon {
    position: absolute;
    left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    color: var(--text-mute);
    pointer-events: none;
}
.control-icon > .input,
.control-icon > .select { padding-left: 32px; }
.control-icon > .input-lg,
.control-icon > .select-lg { padding-left: 38px; }

/* Нативные чекбоксы/радио (напр. «Срез статусов» в тулбарах «Обстановки»
   и «Геокарты») — красим галочку в акцент темы, чтобы они не выбивались
   дефолтным браузерным синим рядом с кастомными селектами. accent-color
   влияет только на по-настоящему нативные контролы; полностью
   кастомные (appearance:none) он не трогает — поэтому безопасно глобально. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Числовые .input (Score от / Макс. событий) — без браузерных стрелок-
   спиннеров: они выбивались из кастомных контролов. Значение вводится с
   клавиатуры или колесом; step сохраняется. Скоуп — только .input, чтобы
   не задеть возможные нативные number-поля вне дизайн-системы. */
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Range slider */
.range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px;
    background: var(--bg-3);
    border-radius: 999px; outline: none;
    cursor: pointer;
}
.range::-webkit-slider-runnable-track { height: 4px; background: var(--bg-3); border-radius: 999px; }
.range::-moz-range-track { height: 4px; background: var(--bg-3); border-radius: 999px; }
.range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px;
    background: var(--accent);
    border: 2px solid var(--bg-1);
    border-radius: 50%;
    margin-top: -6px;
    box-shadow: 0 0 0 1px var(--accent-border);
    cursor: pointer;
    transition: .12s;
}
.range::-moz-range-thumb {
    width: 14px; height: 14px;
    background: var(--accent);
    border: 2px solid var(--bg-1);
    border-radius: 50%;
    cursor: pointer;
}
.range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }

.range-row { display: flex; align-items: center; gap: 10px; }
.range-row .range { flex: 1; }
.range-row output {
    font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-mute);
    min-width: 32px; text-align: right;
}

.label {
    display: block; font-size: var(--type-sm); color: var(--text-dim);
    margin-bottom: 6px; font-weight: 500;
}
.label-mono {
    display: block;
    font-family: var(--font-sans); font-size: var(--type-xs); color: var(--text-mute);
    margin-bottom: 5px;
}
.field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}
.field > .label,
.field > .label-mono { margin-bottom: 0; }
.field__label {
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
}
.field__hint {
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.4;
}
.field__error {
    color: var(--danger);
    font-size: var(--type-sm);
    line-height: 1.4;
}
.field__optional {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
}
.field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.field-inline > :first-child { min-width: 0; flex: 1 1 auto; }
.field--grow { flex: 1 1 220px; }
.form-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.form-toolbar > .field { flex: 1 1 130px; max-width: 240px; }
.form-toolbar > .field--grow { max-width: none; }
.form-toolbar .input,
.form-toolbar .select,
.form-toolbar .dropdown-trigger {
    height: 32px;
    min-height: 32px;
    border-radius: 4px;
    font-size: var(--type-ui);
}
.form-toolbar .input { padding: 5px 10px; }
.form-toolbar .select { padding-top: 5px; padding-bottom: 5px; }
.form-toolbar > .btn { height: 32px; min-height: 32px; }

/* ============================================================
   Шапка страницы — единый заголовок + подпись для страниц с
   одинаковым паттерном (Обстановка, Геокарта…). Заменяет инлайн-
   стили <header style="…"> и захардкоженный text-slate-400 у подписи
   (он игнорировал токены и «ломался» в светлой теме). Заголовок и
   подпись — по общей базовой линии, перенос на узком экране.
   ============================================================ */
.page-header {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 4px 14px; margin-bottom: 14px;
}
.page-title {
    margin: 0; line-height: 1.2;
    font-size: var(--type-page); font-weight: 600; letter-spacing: -0.02em;
    color: var(--text);
}
.page-caption {
    margin: 0; font-size: var(--type-md); color: var(--text-dim);
    flex: 1 1 320px;
}
.page-caption__meta { color: var(--text-mute); }
.page-actions {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 7px;
}
.page-header--flush { margin-bottom: 0; }

@media (max-width: 640px) {
    .page-header { align-items: flex-start; }
    .page-title { width: 100%; font-size: var(--type-page); }
    .page-caption { flex-basis: 100%; font-size: var(--type-body); }
    .page-actions {
        width: 100%; margin-left: 0;
        justify-content: flex-start;
    }
}

/* Два уровня показателей: .metric-strip для компактной служебной строки,
   .metric-grid + .metric-card для самостоятельного обзорного блока. */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.metric-card {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-card);
}
.metric-card__label {
    display: block;
    margin-bottom: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-mute);
    font-family: var(--font-sans); font-size: var(--type-2xs); font-weight: 500;
    letter-spacing: .055em; text-transform: uppercase;
}
.metric-card__value {
    display: block;
    color: var(--text);
    font-size: var(--type-title); font-weight: 700; line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.metric-card--ok .metric-card__value { color: var(--success); }
.metric-card--warn .metric-card__value { color: var(--warn); }
.metric-card--bad .metric-card__value { color: var(--danger); }

@media (max-width: 640px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { padding: 10px; }
    .metric-card__value { font-size: var(--type-section); }
}

/* ============================================================
   Фильтры — рабочая строка без дополнительной карточки и полос.
   ============================================================ */
.card.filter-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 8px 10px;
    padding: 0;
    margin-bottom: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.filter-field { display: flex; flex-direction: column; min-width: 0; }
.filter-field--grow { flex: 1 1 240px; min-width: 220px; }
.filter-field > .label {
    margin-bottom: 4px; white-space: nowrap;
    font-family: var(--font-sans); font-size: var(--type-xs); font-weight: 500;
    color: var(--text-mute);
}
.filter-help {
    max-width: 360px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.45;
}

/* Единая высота всех интерактивных контролов тулбара (32px): селекты,
   числовые поля, кнопка мультивыбора, сегментные группы и кнопки действий
   выстраиваются в один ровный ряд, а не «лесенкой». Компактнее прежних 36px
   — тулбар выглядит аккуратнее и занимает меньше вертикали. box-sizing:
   border-box глобальный, поэтому height учитывает рамку. */
.filter-bar .select,
.filter-bar .input,
.filter-bar .gm-multi-btn {
    height: 32px;
    min-height: 32px;
    font-size: var(--type-ui);
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 4px;
}
.filter-sep { display: none; }

/* Сегментная группа-переключатель — «срез статусов» в «Обстановке» и
   «Геокарте». Раньше это была линейка голых чекбоксов, которые визуально
   не читались как единый контрол (и в геокарте были захардкожены светлым
   цветом → невидимы в светлой теме). Теперь — единый контрол в рамке,
   каждый вариант отдельный сегмент-пилюля, активный подсвечен. Нативный
   чекбокс скрыт, но остаётся в DOM: его :checked и onchange — те же хуки
   (submit GET-формы «Обстановки» / JS-перерисовка карты «Геокарты»). */
.seg-group {
    display: inline-flex; align-items: stretch;
    height: 32px;
    padding: 3px;
    gap: 2px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.seg-group label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 11px;
    border-radius: 3px;
    font-size: var(--type-sm); font-weight: 500;
    color: var(--text-dim);
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.seg-group label:hover { color: var(--text); }
.seg-group input {
    position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
    pointer-events: none;
}
.seg-group label:has(input:checked) {
    background: var(--bg-1);
    color: var(--text);
    font-weight: 600;
}

/* Кластер действий тулбара — прижат вправо. Основное действие
   (Применить/Обновить) — полноразмерная кнопка (не «обрубок» btn-sm),
   слева от неё — ghost «Сбросить» (сброс фильтров к дефолтам). */
.filter-actions {
    margin-left: auto; align-self: flex-end;
    display: inline-flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 8px;
}
.filter-bar .filter-actions > .btn { height: 32px; padding: 0 14px; font-size: var(--type-ui); }
/* совместимость: одиночное действие без обёртки .filter-actions */
.filter-action { margin-left: auto; align-self: flex-end; }

/* ── Мобильный тулбар фильтров ───────────────────────────────────────────
   На узком экране контролы «разъезжались»: поля с фикс-ширинами Tailwind
   (w-24/w-32/w-56) не помещались в ряд, а .filter-actions с margin-left:auto
   прилипал к правому краю оторванно от полей. Здесь поля растягиваются на
   всю доступную ширину и переносятся аккуратными рядами, вертикальный
   разделитель прячется (в переносе он бессмыслен), а «Сбросить/Применить»
   становятся на всю ширину отдельной строкой. */
@media (max-width: 640px) {
    .card.filter-bar { gap: 8px; }
    .filter-field { flex: 1 1 140px; }
    /* перекрываем Tailwind w-24/w-32/w-40/w-56 (специфичность .filter-bar .select
       выше одиночного .w-*), чтобы контролы тянулись на всю ячейку */
    .filter-bar .select,
    .filter-bar .input,
    .filter-bar .gm-multi-btn { width: 100%; }
    .filter-sep { display: none; }
    .seg-group { width: 100%; }
    .seg-group label { flex: 1 1 0; justify-content: center; padding: 0 6px; }
    .filter-actions { margin-left: 0; width: 100%; }
    .filter-actions > .btn { flex: 1 1 0; }
}

/* Toggle as accessible button */
.toggle {
    position: relative;
    width: 38px; height: 22px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: .2s;
    display: inline-block;
    flex-shrink: 0;
    padding: 0;
    font: inherit;
    vertical-align: middle;
}
.toggle::after {
    content: ""; position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: .2s;
}
.toggle.on, .toggle[aria-checked="true"] {
    background: var(--accent); border-color: var(--accent);
}
.toggle.on::after, .toggle[aria-checked="true"]::after {
    left: 18px; background: #ffffff;
}
.toggle[disabled], .toggle[aria-disabled="true"] {
    opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* Checkbox + indeterminate */
input[type="checkbox"].nbl-check {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--border);
    background: var(--bg-2);
    border-radius: 5px; cursor: pointer;
    display: inline-grid; place-content: center;
    margin: 0; vertical-align: middle;
    transition: .15s; position: relative;
}
input[type="checkbox"].nbl-check:checked {
    background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"].nbl-check:checked::after {
    content: ""; width: 9px; height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
}
input[type="checkbox"].nbl-check:indeterminate {
    background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"].nbl-check:indeterminate::after {
    content: ""; width: 9px; height: 2px;
    background: #ffffff;
    border-radius: 1px;
}
input[type="checkbox"].nbl-check:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   Chips (badges)
   ============================================================ */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: var(--type-xs); font-weight: 500;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    line-height: 1.4;
    white-space: nowrap;
}
.chip-ok, .chip-success { color: var(--success); }
.chip-warn   { color: var(--warn); }
.chip-bad    { color: var(--danger); }
.chip-info   { color: var(--info); }
.chip-accent { color: var(--accent); }
.chip-muted  { color: var(--text-dim); }
.chip-dot::before {
    content: ""; display: inline-block;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
    margin-right: 2px;
}
/* Filled — для весомых счётчиков/статусов */
.chip-filled.chip-ok, .chip-filled.chip-success { background: var(--success-soft); border-color: var(--success-border); }
.chip-filled.chip-warn   { background: var(--warn-soft);    border-color: var(--warn-border); }
.chip-filled.chip-bad    { background: var(--danger-soft);  border-color: var(--danger-border); }
.chip-filled.chip-info   { background: var(--info-soft);    border-color: var(--info-border); }
.chip-filled.chip-accent { background: var(--accent-soft);  border-color: var(--accent-border); }

/* Метаданные карточек: единая pill-геометрия поверх семантики .chip. */
.chip-meta {
    gap: 4px;
    padding: 3px 8px;
    border-color: var(--border-soft);
    border-radius: 4px;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
}
.chip-meta--compact {
    min-height: 22px;
    padding-block: 2px;
    font-size: var(--type-sm);
}
.chip-meta--surface { padding: 4px 9px; background: var(--bg-1); }
.chip-meta--strong { color: var(--text); background: var(--bg-3); border-color: var(--border); }
.chip-meta--quiet { color: var(--text-mute); background: transparent; }
.chip-meta small { color: var(--text-mute); font-family: var(--font-mono); }

/* Risk / score dots */
.score-dot, .risk-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.score-dot.high, .risk-dot.high { background: var(--danger); }
.score-dot.mid,  .risk-dot.mid  { background: var(--warn); }
.score-dot.low,  .risk-dot.low  { background: var(--text-mute); }
.score-dot-high { background: var(--danger); }
.score-dot-mid  { background: var(--warn); }
.score-dot-low  { background: var(--text-mute); }

/* Icon box */
.icon-box {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-dim);
    flex-shrink: 0;
}
.icon-box.accent,  .icon-box-accent  { color: var(--accent);  background: var(--accent-soft);  border-color: var(--accent-border); }
.icon-box.success, .icon-box-success { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.icon-box.warn,    .icon-box-warn    { color: var(--warn);    background: var(--warn-soft);    border-color: var(--warn-border); }
.icon-box.bad,     .icon-box-bad     { color: var(--danger);  background: var(--danger-soft);  border-color: var(--danger-border); }
.icon-box.info,    .icon-box-info    { color: var(--info);    background: var(--info-soft);    border-color: var(--info-border); }

/* Spinner */
.spinner {
    width: 13px; height: 13px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    border-top-color: var(--text);
    animation: spin .7s linear infinite;
    display: inline-block;
}
.spinner--sm { width: 11px; height: 11px; border-width: 1.25px; }
.spinner--lg { width: 18px; height: 18px; border-width: 2px; }
.spinner--accent { border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn.is-requesting { cursor: wait; }
.is-task-pending { cursor: progress; opacity: .78; }
.btn.is-requesting:not(:has(.htmx-indicator))::before,
.btn.is-task-pending:not(:has(.htmx-indicator))::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 999px;
    animation: spin .7s linear infinite;
}

.async-state {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.45;
}
.async-state > .spinner,
.async-state > svg,
.async-state__icon { flex: none; margin-top: 2px; }
.async-state__body { min-width: 0; flex: 1; }
.async-state__title { color: var(--text); font-weight: 600; }
.async-state__message { margin-top: 2px; color: var(--text-mute); overflow-wrap: anywhere; }
.async-state__meta { margin-left: auto; color: var(--text-mute); font-family: var(--font-mono); font-size: var(--type-xs); white-space: nowrap; }
.async-state--compact { padding: 4px 0; border-radius: 0; }
.async-state--inline { display: inline-flex; width: auto; }
.async-state--running,
.async-state--success,
.async-state--warning,
.async-state--danger,
.async-state--error { border-color: transparent; background: transparent; }
.async-state--bare { padding: 3px 0; border: 0; background: transparent; }
.async-state--running > svg { color: var(--info); }
.async-state--success > svg { color: var(--success); }
.async-state--warning > svg { color: var(--warn); }
.async-state--danger > svg,
.async-state--error > svg { color: var(--danger); }

.status-steps { display: flex; flex-direction: column; gap: 5px; }
.status-step {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 4px 7px;
    border-radius: 7px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.status-step__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-mute); }
.status-step__meta { color: var(--text-mute); font-family: var(--font-mono); font-size: var(--type-xs); }
.status-step.is-running { background: var(--info-soft); color: var(--text); }
.status-step.is-running .status-step__icon { color: var(--info); }
.status-step.is-done { color: var(--text-dim); }
.status-step.is-done .status-step__icon { color: var(--success); }
.status-step.is-failed { background: var(--danger-soft); color: var(--danger); }
.status-step.is-failed .status-step__icon { color: var(--danger); }

.id-tag { font-family: var(--font-mono); color: var(--text-mute); font-size: var(--type-xs); }

/* ============================================================
   Section heading / Page title / Divider
   ============================================================ */
.section-heading {
    font-family: var(--font-mono); font-size: var(--type-xs);
    color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin: 14px 0 6px; font-weight: 500;
}
.section-heading:first-child { margin-top: 0; }
.section-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.section-head-row--start { align-items: flex-start; }
.section-head-row--end { align-items: flex-end; }
.section-head-row--compact { gap: 8px; }
.section-head-row--spaced { margin-bottom: 10px; }

.action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.action-row--compact { gap: 5px; }
.action-row--spaced { margin-top: 12px; }

.notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.45;
}
.notice strong,
.notice b { color: var(--text); }
.notice > svg {
    flex: none;
    margin-top: 2px;
}
.notice-info { border-color: transparent; background: transparent; }
.notice-info > svg { color: var(--info); }
.notice-warning { border-color: transparent; background: transparent; }
.notice-warn { border-color: transparent; background: transparent; }
.notice-warn > svg,
.notice-warning > svg { color: var(--warn); }
.notice-success { border-color: transparent; background: transparent; }
.notice-ok { border-color: transparent; background: transparent; }
.notice-ok > svg,
.notice-success > svg { color: var(--success); }
.notice-danger { border-color: transparent; background: transparent; color: var(--danger); }
.notice-bad,
.notice--danger { border-color: transparent; background: transparent; color: var(--danger); }
.notice-bad > svg,
.notice--danger > svg,
.notice-danger > svg { color: var(--danger); }
.notice--rail {
    border: 0;
    border-radius: 0;
    padding-left: 0;
}
.notice--compact { padding: 5px 0; border-radius: 0; }
.notice--spaced { margin-bottom: 12px; }
.notice__content { min-width: 0; flex: 1; }
.notice__title { margin-bottom: 2px; color: var(--text); font-weight: 600; }
.notice__message { overflow-wrap: anywhere; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.disclosure {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.disclosure > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 12px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    font-size: var(--type-body);
    font-weight: 600;
    user-select: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    flex: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.55;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform .15s ease;
}
.disclosure[open] > summary::after { transform: rotate(225deg) translate(-1px, 0); }
.disclosure > summary:hover { background: var(--bg-2); }
.disclosure > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.disclosure__body {
    padding: 12px;
    border-top: 1px solid var(--border-soft);
}
.disclosure--compact > summary { padding: 7px 9px; font-size: var(--type-sm); }
.disclosure--compact > .disclosure__body { padding: 9px; }
.disclosure--bare {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.disclosure--bare > summary { padding: 2px 0; color: var(--text-dim); }
.disclosure--bare > summary:hover { background: transparent; color: var(--text); }
.disclosure--bare > .disclosure__body {
    padding: 7px 0 0;
    border-top: 0;
}
.disclosure--warn { border-color: var(--warn-border); }
.disclosure--warn > summary { color: var(--warn); background: var(--warn-soft); }

.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover[open] > summary.btn { background: var(--bg-2); color: var(--text); }
.popover__panel {
    position: absolute;
    top: calc(100% + 6px);
    z-index: 40;
    width: min(380px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 96px));
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
}
.popover--end > .popover__panel { right: 0; }
.popover--start > .popover__panel { left: 0; }

.confirm-dialog {
    width: min(440px, calc(100vw - 28px));
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--text);
}
.confirm-dialog::backdrop {
    background: rgba(5, 8, 14, .64);
}
.confirm-dialog__surface {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
    animation: confirmDialogIn .16s ease-out;
}
.confirm-dialog__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 20px 14px;
}
.confirm-dialog__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--warn);
}
.confirm-dialog.is-danger .confirm-dialog__icon {
    color: var(--danger);
}
.confirm-dialog__copy { min-width: 0; flex: 1; }
.confirm-dialog__title {
    margin: 0;
    color: var(--text);
    font-size: var(--type-lg);
    font-weight: 600;
    line-height: 1.25;
}
.confirm-dialog__message {
    margin-top: 7px;
    color: var(--text-dim);
    font-size: var(--type-ui);
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 20px 18px;
    border-top: 0;
    background: transparent;
}
.confirm-dialog.is-danger [data-confirm-submit] {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}
@keyframes confirmDialogIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.divider { height: 1px; background: var(--border-soft); margin: 12px 0; }

@media (max-width: 720px) {
    .section-head-row--stack-mobile {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .popover > .popover__panel {
        position: fixed;
        right: 12px;
        left: 12px;
        top: 50%;
        width: auto;
        max-height: calc(100svh - 24px);
        transform: translateY(-50%);
    }
    .confirm-dialog { width: calc(100vw - 24px); }
    .confirm-dialog__head { padding: 16px; }
    .confirm-dialog__actions { padding: 10px 16px; }
    .confirm-dialog__actions .btn { flex: 1; justify-content: center; }
}

.page-title-row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
    gap: 16px; flex-wrap: wrap;
}
.page-title-row h1 {
    margin: 0; font-family: var(--font-sans);
    font-size: var(--type-page); font-weight: 600; letter-spacing: -0.02em;
    color: var(--text);
}
.page-sub { color: var(--text-dim); font-size: var(--type-body); }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    width: 232px;
    min-width: 232px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    transition: width .18s ease, min-width .18s ease;
}
.sidebar-header { flex: 0 0 auto; min-height: 38px; align-items: center; }
.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.sidebar-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.sidebar-nav { min-width: 0; }

.sidebar-logo {
    display: flex; align-items: center; gap: 12px;
}
/* Единый прозрачный SVG-знак: используется в сайдбаре и на входе. */
.sidebar-logo-img {
    display: block;
    width: 30px; height: 30px;
    flex-shrink: 0;
}
.sidebar-logo-title {
    font-family: var(--font-serif);
    font-size: var(--type-title); font-weight: 700; letter-spacing: -0.01em;
    line-height: 1;
    color: var(--text);
}

.sidebar a.nav-item, .nav-item {
    display: flex; align-items: center; gap: 10px;
    min-height: 40px;
    padding: 8px 9px; border-radius: 4px;
    color: var(--text-dim); font-size: var(--type-body);
    text-decoration: none;
    border: 0;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}
.sidebar a.nav-item:hover, .nav-item:hover { background: var(--bg-2); color: var(--text); }
/* Иконки в навигации — без подложки, просто цветная иконка. Раньше у
   каждой иконки был серый прямоугольник 26×26 с border — он визуально
   перегружал левую панель и тянул внимание от лейблов. Теперь иконка
   просто наследует цвет текста пункта меню. */
.sidebar a.nav-item .nav-icon, .nav-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-mute);
    flex-shrink: 0;
}
.sidebar a.nav-item:hover .nav-icon, .nav-item:hover .nav-icon {
    color: var(--text);
}
.sidebar a.nav-item.active, .nav-item.active {
    background: color-mix(in srgb, var(--bg-2) 74%, transparent);
    color: var(--text);
    font-weight: 500;
}
.sidebar a.nav-item.active .nav-icon, .nav-item.active .nav-icon {
    color: var(--text);
}
.nav-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-count.is-empty { display: none !important; }

.sidebar-nav-group {
    margin: 13px 9px 4px;
    padding-top: 5px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}
.sidebar-nav-group.is-first {
    margin-top: 3px;
    padding-top: 0;
}

/* ── Sidebar «Темы» — сворачиваемая секция ─────────────────────────── */
.sidebar-themes-section {
    /* Контейнер секции — не имеет своих visible стилей, контейнер для
       header + list. */
}
.sidebar-themes-header {
    /* Контейнер split-button — flex с двумя половинками. */
    user-select: none;
    border-radius: 8px;
    overflow: hidden;
}
.sidebar-themes-link {
    /* Ссылка — главная половинка. Hover-стили уже из .nav-item. */
    text-decoration: none;
}
.sidebar-themes-chevron-btn {
    /* Chevron — отдельная компактная кнопка справа. Чуть крупнее
       прежней inline-стрелки. */
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-mute);
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--type-md);
    line-height: 1;
    transition: background .15s, color .15s;
    border-radius: 8px;
    min-width: 32px;
}
.sidebar-themes-chevron-btn:hover {
    background: var(--bg-2);
    color: var(--text);
}
.sidebar-themes-pending {
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    color: var(--text-mute);
    opacity: 0.7;
    margin-left: 6px;
}
.sidebar-theme-item {
    /* Тоньше обычных nav-item — это «второй уровень». */
    font-size: var(--type-ui);
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 6px;
}
.sidebar-theme-name {
    /* Длинные имена обрезаются с многоточием. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-theme-count {
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    color: var(--text-mute);
    opacity: 0.7;
    margin-left: auto;
}
.sidebar-theme-pending {
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    color: var(--text-mute);
    opacity: 0.7;
    margin-left: 4px;
}
.sidebar-theme-create {
    font-size: var(--type-sm);
    color: var(--text-mute);
    padding-top: 5px;
    padding-bottom: 5px;
}
.sidebar-theme-create:hover {
    color: var(--accent);
}
.sidebar-theme-create .nav-icon {
    width: 16px;
}
.sidebar-themes-empty {
    font-size: var(--type-sm);
    color: var(--text-mute);
    padding: 6px 12px;
    opacity: 0.7;
    font-style: italic;
}
.sidebar-themes-archive-toggle {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: var(--type-xs);
    color: var(--text-mute);
    padding: 4px 12px;
    margin-top: 4px;
    border-radius: 6px;
}
.sidebar-themes-archive-toggle:hover {
    background: var(--bg-2);
    color: var(--text);
}
.sidebar-theme-archived {
    opacity: 0.6;
    font-style: italic;
}

.sidebar-observations-section {
    margin-top: 4px;
}
.sidebar-observations-header.is-open {
    background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.sidebar-observations-chevron {
    display: inline-flex;
    transition: transform .15s ease;
}
.sidebar-observations-chevron.is-open {
    transform: rotate(180deg);
}
.sidebar-observations-list {
    padding: 3px 4px 4px 28px;
}
.sidebar-observation {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    padding: 5px 7px;
    border-radius: 7px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.25;
    text-decoration: none;
}
.sidebar-observation:hover {
    background: var(--bg-2);
    color: var(--text);
}
.sidebar-observation__title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-observation__new {
    display: inline-flex;
    min-width: 21px;
    height: 20px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    font-weight: 600;
}
.sidebar-observation__new.has-new {
    background: var(--info-soft);
    color: var(--info);
}
.sidebar-observation-empty {
    padding: 6px 7px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}

.sidebar-user-signals {
    margin: 12px 4px 10px;
    padding: 9px 5px 0;
}
.sidebar-user-status {
    display: grid;
    gap: 3px;
}
.sidebar-user-signal {
    display: flex;
    min-width: 0;
    min-height: 27px;
    align-items: center;
    gap: 7px;
    padding: 4px 5px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.25;
}
.sidebar-user-signal.is-muted {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.sidebar-user-signal__label {
    color: var(--text-mute);
}
.sidebar-user-signal__value {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-presence {
    margin: 14px 4px 4px;
    padding: 0;
}
.sidebar-presence__head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    margin: 0;
    padding: 4px 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 500;
    line-height: 1.2;
}
.sidebar-presence__count {
    margin-left: auto;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.sidebar-presence__people {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sidebar-presence__person {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--type-xs);
    line-height: 1.2;
}
.sidebar-presence__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-presence__empty {
    color: var(--text-mute);
    font-size: var(--type-2xs);
}
.sidebar-system {
    margin: 10px 2px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    overflow: clip;
}
.sidebar-system__summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 9px;
    cursor: pointer;
    list-style: none;
    color: var(--text-dim);
    user-select: none;
}
.sidebar-system__summary::-webkit-details-marker { display: none; }
.sidebar-system__summary:hover { color: var(--text); background: var(--bg-2); }
.sidebar-system__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-sm);
    font-weight: 600;
}
.sidebar-system__hint {
    margin-left: auto;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.sidebar-system__chevron {
    display: inline-flex;
    color: var(--text-mute);
    transition: transform .15s ease;
}
.sidebar-system[open] .sidebar-system__chevron { transform: rotate(180deg); }
.sidebar-system__body {
    padding: 8px 9px 10px;
    border-top: 0;
}
.side-status {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--type-sm);
    color: var(--text-dim);
}
.sidebar-task-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    margin: 7px 0 8px;
}
.sidebar-task-stat {
    display: flex;
    min-width: 0;
    min-height: 34px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 3px 2px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-2);
    text-align: center;
}
.sidebar-task-stat__label {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-mute);
    font-family: var(--font-sans);
    font-size: var(--type-2xs);
    font-weight: 500;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-task-stat__value {
    font-family: var(--font-mono);
    font-size: var(--type-sm);
    font-weight: 600;
    line-height: 1;
}
.side-line, .side-status .row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    margin: 4px 0;
    color: var(--text-dim);
    line-height: 1.3;
}
/* display: inline-block — иначе размер 6x6 не работает когда span
   находится не во flex-родителе (например, у Воркера обёрнут в <span>
   внутри side-line, и dot становился 0x0 inline-нодой). */
.side-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.side-dot-ok    { background: var(--success); }
.side-dot-warn  { background: var(--warn); }
.side-dot-bad   { background: var(--danger); }
.side-dot-info  { background: var(--info); }
.side-dot-muted { background: var(--text-mute); }

.sidebar-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 8px 4px max(0px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-soft);
    background: var(--bg-0);
}
.sidebar-session {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--text-mute);
}
.sidebar-session__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    font-size: var(--type-2xs);
    line-height: 1.25;
}
.sidebar-session__copy b {
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--type-xs);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-logout { flex: 0 0 auto; }
.sidebar-collapse-toggle,
.sidebar-logout-button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.sidebar-collapse-toggle:hover,
.sidebar-logout-button:hover {
    background: color-mix(in srgb, var(--bg-2) 72%, transparent);
    color: var(--text);
}
.sidebar-collapse-icon { display: inline-flex; }
.sidebar-collapse-icon--collapsed { display: none; }

/* Theme toggle button */
.theme-toggle {
    width: 28px; height: 28px;
    display: inline-grid; place-items: center;
    border-radius: 4px;
    border: 0;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer; transition: color .12s ease, background .12s ease;
    flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--bg-2) 72%, transparent); }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .icon-sun, .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon, [data-theme="light"] .theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun, [data-theme="light"] .theme-toggle .sun { display: block; }

/* ============================================================
   Toolbar / Tabs / Slide-over / Dropdown / Toast
   ============================================================ */
.toolbar {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
    box-shadow: var(--shadow-card);
}
.toolbar-cell { display: flex; flex-direction: column; gap: 4px; }
.toolbar .input,
.toolbar .select {
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    font-size: var(--type-ui);
    padding-top: 5px;
    padding-bottom: 5px;
}
.toolbar .btn { height: 32px; min-height: 32px; }

.tabs-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
    margin-bottom: 14px; padding: 4px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.tab-btn {
    min-height: 32px; padding: 5px 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: inherit; font-size: var(--type-sm); font-weight: 500;
    line-height: 1.15; text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); background: var(--bg-2); }
.tab-btn.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent-border);
}
.tab-btn__icon { display: inline-flex; flex: none; }
.tab-count {
    min-width: 18px; padding: 1px 5px;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-mute);
    font-family: var(--font-mono); font-size: var(--type-2xs); line-height: 1.25;
    text-align: center;
}
.tab-btn.active .tab-count { color: var(--accent); }
.tab-btn--external { color: var(--text-mute); }
.tabs-row--compact .tab-btn { min-height: 30px; padding: 4px 8px; }
.tabs-row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.tabs-row--scroll .tab-btn { flex: 0 0 auto; }
.tabs-row--wrap { margin-bottom: 0; border: 0; padding: 0; box-shadow: none; }

.tech-nav {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}
.tech-nav__primary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.tech-nav__primary .tabs-row { flex: 1; min-width: 0; margin-bottom: 0; }
.tech-nav__label {
    flex: none;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tech-nav__section { box-shadow: none; }
.tech-nav__section > summary { color: var(--text-dim); }
.tech-nav__section > .disclosure__body { padding: 8px; }
.tech-nav__count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    text-align: center;
}
.tech-nav__hint {
    margin: 0 2px 8px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}

/* Система: обзор первым, полный технический каталог — по запросу. */
.system-page {
    width: min(1120px, 100%);
    margin-inline: auto;
}
.system-page-head {
    margin-bottom: 16px;
}
.system-page-head .page-title { margin: 0; }
.system-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
.system-nav__home,
.system-nav__sections > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    border: 0;
    border-radius: var(--radius);
    padding: 8px 11px;
    color: var(--text-mute);
    background: transparent;
    font-size: var(--type-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.system-nav__home:hover,
.system-nav__sections > summary:hover {
    color: var(--text);
    background: var(--bg-2);
}
.system-nav__home.active {
    color: var(--text);
    background: var(--bg-2);
}
.system-nav__home svg,
.system-nav__sections > summary svg { flex: none; }
.system-nav__sections {
    position: relative;
    min-width: 0;
}
.system-nav__sections > summary { list-style: none; }
.system-nav__sections > summary::-webkit-details-marker { display: none; }
.system-nav__sections > summary::marker { content: ""; }
.system-nav__sections > summary svg:last-child {
    margin-left: 2px;
    transition: transform .12s ease;
}
.system-nav__sections[open] > summary svg:last-child { transform: rotate(180deg); }
.system-nav__catalog {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    gap: 20px 28px;
    width: min(760px, calc(100vw - 48px));
    max-height: min(660px, calc(100dvh - 150px));
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
    overscroll-behavior: contain;
}
.system-nav__catalog-head { display: none; }
.system-nav__group { min-width: 0; }
.system-nav__group h2 {
    margin: 0 0 6px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.system-nav__group > div { display: grid; }
.system-nav__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.3;
    text-decoration: none;
}
.system-nav__item:hover { color: var(--text); background: var(--bg-2); }
.system-nav__item.active { color: var(--accent); background: var(--accent-soft); }
.system-body { min-width: 0; }

.system-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
    width: min(900px, 100%);
}
.system-overview-section {
    min-width: 0;
}
.system-overview-section:last-child { grid-column: 1 / -1; }
.system-overview-section > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 31px;
    border-bottom: 1px solid var(--border);
    padding: 0 1px 9px;
}
.system-overview-section > header h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 700;
}
.system-overview-section > header a {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.system-overview-section > header a:hover { color: var(--text); }
.system-status-list { display: grid; }
.system-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 1px;
}
.system-status-row__name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
}
.system-status-row__name svg { color: var(--text-mute); }
.system-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    white-space: nowrap;
}
.system-status i {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
.system-status.is-ok { color: var(--success); }
.system-status.is-busy { color: var(--info); }
.system-status.is-warn { color: var(--warn); }
.system-status.is-muted { color: var(--text-mute); }
.system-queue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 96px;
    border-bottom: 1px solid var(--border-soft);
}
.system-queue-grid > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    border-right: 1px solid var(--border-soft);
    padding: 12px 15px;
}
.system-queue-grid > div:first-child { padding-left: 1px; }
.system-queue-grid > div:last-child { border-right: 0; }
.system-queue-grid span { color: var(--text-mute); font-size: var(--type-xs); }
.system-queue-grid strong {
    color: var(--text);
    font-size: var(--type-page);
    font-weight: 600;
    line-height: 1;
}
.system-queue-grid .has-warning strong { color: var(--warn); }
.system-overview-alert {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--warn);
    font-size: var(--type-sm);
}
.system-action-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-soft);
}
.system-action-list > a {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    min-height: 66px;
    border-bottom: 1px solid var(--border-soft);
    padding: 10px 10px 10px 1px;
    color: var(--text-mute);
    text-decoration: none;
}
.system-action-list > a:nth-child(odd) { margin-right: 22px; }
.system-action-list > a:hover { color: var(--text); background: var(--bg-2); }
.system-action-list > a > span { display: grid; gap: 2px; min-width: 0; }
.system-action-list strong { color: var(--text); font-size: var(--type-sm); }
.system-action-list small { color: var(--text-mute); font-size: var(--type-xs); }
.system-action-list > a > svg:last-child { justify-self: end; }

@media (max-width: 760px) {
    .system-page-head { margin-bottom: 10px; }
    .system-nav { margin-bottom: 16px; }
    .system-nav__home span { display: none; }
    .system-nav__home { width: 40px; justify-content: center; padding-inline: 0; }
    .system-nav__sections { flex: 1; }
    .system-nav__sections > summary { width: 100%; }
    .system-nav__sections > summary svg:last-child { margin-left: auto; }
    .system-nav__catalog {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        width: 100%;
        max-height: calc(100dvh - 72px);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 18px 14px 24px;
    }
    .system-nav__catalog-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 11px;
    }
    .system-nav__catalog-head strong { color: var(--text); font-size: var(--type-md); }
    .system-nav__catalog-head button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        padding: 0;
        color: var(--text-mute);
        background: transparent;
    }
    .system-overview { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .system-overview-section:last-child { grid-column: auto; }
    .system-action-list { grid-template-columns: minmax(0, 1fr); }
    .system-action-list > a:nth-child(odd) { margin-right: 0; }
}

/* Проверка событий: рабочий запрос и результаты без лабораторной витрины. */
.analysis-page {
    width: min(980px, 100%);
    margin-inline: auto;
}
.analysis-page-head { margin-bottom: 18px; }
.analysis-page-head .page-title { margin: 0; }
.analysis-query {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 116px auto auto;
    align-items: end;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 18px;
}
.analysis-query label { display: grid; gap: 6px; min-width: 0; }
.analysis-query__submit { min-height: 40px; }
.analysis-number-field {
    position: relative;
    display: block;
}
.analysis-number-field .input { width: 100%; padding-right: 36px; }
.analysis-number-field > span {
    position: absolute;
    top: 50%;
    right: 10px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    transform: translateY(-50%);
    pointer-events: none;
}
.analysis-query__settings { position: relative; align-self: end; }
.analysis-query__settings > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    border: 0;
    border-radius: var(--radius);
    padding: 8px 10px;
    color: var(--text-mute);
    background: transparent;
    font-size: var(--type-sm);
    cursor: pointer;
    list-style: none;
}
.analysis-query__settings > summary::-webkit-details-marker { display: none; }
.analysis-query__settings > summary::marker { content: ""; }
.analysis-query__settings > summary:hover,
.analysis-query__settings[open] > summary { color: var(--text); background: var(--bg-2); }
.analysis-query__settings-body {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: 190px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
}
.analysis-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 14px 2px 24px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.analysis-summary strong { color: var(--text); font-weight: 600; }
.analysis-section { margin-top: 18px; }
.analysis-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    padding: 0 2px 10px;
}
.analysis-section__head h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-lg);
    font-weight: 600;
}
.analysis-section__head > span {
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.analysis-result-list { display: grid; }
.analysis-result {
    min-width: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 15px 2px;
}
.analysis-result__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.analysis-result__head > div { min-width: 0; }
.analysis-result h3 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
    line-height: 1.4;
}
.analysis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.analysis-meta > span + span::before {
    margin-right: 5px;
    color: var(--border);
    content: "·";
}
.analysis-confidence {
    flex: none;
    color: var(--text-dim);
    font-size: var(--type-sm);
    white-space: nowrap;
}
.analysis-result__meaning {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.45;
}
.analysis-result__meaning strong { color: var(--text); font-weight: 600; }
.analysis-result__meaning > * + *::before {
    margin-right: 5px;
    color: var(--text-mute);
    content: "·";
}
.analysis-result__details { margin-top: 8px; }
.analysis-result__details > summary {
    width: fit-content;
    color: var(--text-mute);
    font-size: var(--type-xs);
    cursor: pointer;
}
.analysis-result__details > div {
    max-width: 780px;
    padding: 8px 0 1px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.5;
}
.analysis-result__details p { margin: 0; }
.analysis-result__details p + p { margin-top: 6px; }
.analysis-technical {
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.analysis-empty {
    margin: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 18px 2px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.analysis-diagnostics {
    margin-top: 28px;
    border-block: 1px solid var(--border);
}
.analysis-diagnostics > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 2px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    cursor: pointer;
    list-style: none;
}
.analysis-diagnostics > summary::-webkit-details-marker { display: none; }
.analysis-diagnostics > summary::marker { content: ""; }
.analysis-diagnostics[open] > summary { color: var(--text); border-bottom: 1px solid var(--border-soft); }
.analysis-diagnostics__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 30px;
    padding: 18px 2px 22px;
}
.analysis-diagnostics__body section { min-width: 0; }
.analysis-diagnostics__label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.analysis-diagnostics__body strong { color: var(--text); font-size: var(--type-sm); }
.analysis-diagnostics__body p {
    margin: 3px 0 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.45;
}

@media (max-width: 620px) {
    .analysis-page-head { margin-bottom: 14px; }
    .analysis-query { grid-template-columns: minmax(0, 1fr) 112px; }
    .analysis-query__text { grid-column: 1 / -1; }
    .analysis-query__submit { width: 100%; justify-content: center; }
    .analysis-query__settings { grid-column: 1 / -1; }
    .analysis-query__settings > summary { padding-left: 2px; }
    .analysis-query__settings-body {
        position: static;
        width: min(220px, 100%);
        margin-top: 4px;
        box-shadow: none;
    }
    .analysis-summary { padding-bottom: 18px; }
    .analysis-result__head { display: block; }
    .analysis-confidence { display: block; margin-top: 7px; }
    .analysis-diagnostics__body { grid-template-columns: minmax(0, 1fr); }
}

.health-controls { padding: 9px 10px; gap: 9px; }
.health-controls__type { min-width: 170px; }
.health-controls__note {
    margin-left: auto;
    align-self: center;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.health-flow-scroll {
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 0 3px;
    scrollbar-width: thin;
}
.health-flow-chart {
    display: flex;
    align-items: stretch;
    gap: 3px;
    width: max-content;
    min-width: 100%;
    height: 108px;
}
.health-flow-point {
    width: 27px;
    min-width: 27px;
    display: grid;
    grid-template-rows: 16px 1fr 13px;
    align-items: end;
    text-align: center;
}
.health-flow-point__value {
    overflow: hidden;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    line-height: 1;
    text-overflow: clip;
}
.health-flow-point__track {
    position: relative;
    display: block;
    height: 76px;
    border-bottom: 1px solid var(--border);
}
.health-flow-point__bar {
    position: absolute;
    right: 2px;
    bottom: 0;
    left: 2px;
    min-height: 1px;
    border-radius: 3px 3px 0 0;
}
.health-flow-point__date {
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    line-height: 1;
}
.health-shape-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.health-block-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: var(--type-body);
    font-weight: 600;
}
.health-block-note {
    margin: 0;
    color: var(--text-mute);
    font-size: var(--type-sm);
    line-height: 1.5;
}
.health-compact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 13px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.health-compact-line b { color: var(--text); }
.health-versions { margin-top: 14px; }
.health-summary-note {
    margin-left: 4px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
}
.health-version-row {
    display: grid;
    grid-template-columns: 48px minmax(80px, 1fr) 95px;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.health-version-track {
    height: 12px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-2);
}
.health-version-track > span { display: block; height: 100%; opacity: .72; }
.settings-sections { display: grid; gap: 16px; }
.settings-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    padding: 0 2px;
}
.settings-section__head h3 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 600;
}
.settings-section__head > span {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.settings-section__groups { display: grid; gap: 6px; }
.settings-group { box-shadow: none; }
.settings-group > summary { font-size: var(--type-ui); }
.settings-group__count {
    min-width: 21px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    text-align: center;
}
.taxonomy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.taxonomy-head__title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
}
.taxonomy-head p {
    margin: 3px 0 0;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.taxonomy-list { display: grid; gap: 8px; }
.taxonomy-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.taxonomy-row__order { display: flex; flex-direction: column; gap: 3px; }
.taxonomy-row__order .btn { width: 30px; height: 30px; min-height: 30px; }
.taxonomy-row__body { min-width: 0; }
.taxonomy-main-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto 32px 32px;
    align-items: end;
    gap: 7px;
}
.taxonomy-main-form__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
}
.taxonomy-main-form__meta code,
.taxonomy-org-title code { color: var(--text-mute); font-size: var(--type-xs); }
.taxonomy-delete { color: var(--danger); }
.taxonomy-values { margin-top: 9px; }
.taxonomy-values > .field-label { display: block; margin-bottom: 5px; }
.taxonomy-values > .field-label small {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
    text-transform: none;
}
.taxonomy-values__items { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.taxonomy-value { display: inline-flex; align-items: center; gap: 4px; }
.taxonomy-value form { display: inline; margin: 0; }
.taxonomy-value button {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
}
.taxonomy-value button:hover { color: var(--danger); }
.taxonomy-values__empty { color: var(--text-mute); font-size: var(--type-sm); }
.taxonomy-value-add { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.taxonomy-value-add .input { width: 170px; }
.taxonomy-add,
.taxonomy-reset {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}
.taxonomy-add > div { display: grid; gap: 1px; margin-right: auto; }
.taxonomy-add > div strong { display: flex; align-items: center; gap: 5px; font-size: var(--type-ui); }
.taxonomy-add > div span,
.taxonomy-reset > span { color: var(--text-mute); font-size: var(--type-xs); }
.taxonomy-add > .input { width: min(280px, 100%); }
.taxonomy-reset > .btn { margin-left: auto; }
.taxonomy-org-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 9px;
}
.taxonomy-org-title .cluster-org-icon { width: 20px; height: 20px; }
.taxonomy-org-form {
    display: grid;
    grid-template-columns: minmax(140px, .8fr) minmax(140px, .7fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 8px;
}
.taxonomy-org-form__description { grid-column: 1 / -2; }
.taxonomy-org-form__description .textarea { min-height: 58px; resize: vertical; }
.taxonomy-org-form__actions { display: flex; align-items: center; gap: 5px; }
.taxonomy-org-lists {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border-soft);
}
.guide-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
}
.guide-list { margin: 0; padding-left: 20px; color: var(--text-dim); font-size: var(--type-ui); line-height: 1.6; }
.guide-list li + li { margin-top: 5px; }
.guide-pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.guide-pipeline > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--text-dim);
    font-size: var(--type-sm);
}
.guide-pipeline > span b { color: var(--accent); font-family: var(--font-mono); }
.guide-pipeline > svg { color: var(--text-mute); }
.guide-note { margin: 10px 0 0; color: var(--text-dim); font-size: var(--type-ui); line-height: 1.6; }
.guide-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 18px; }
.guide-table > div { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.guide-table b { color: var(--text); font-size: var(--type-ui); }
.guide-table span { color: var(--text-mute); font-size: var(--type-sm); line-height: 1.45; }
.filter-field--grow { flex: 1 1 280px; }
.filter-field--grow .input { width: 100%; }
.table-result-count {
    margin: 0 0 7px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    text-align: right;
}

@media (max-width: 720px) {
    .tech-nav__primary { display: block; }
    .tech-nav__label { display: block; margin: 0 0 5px 4px; }
    .health-controls__note { width: 100%; margin-left: 0; }
    .health-shape-grid { grid-template-columns: 1fr; gap: 16px; }
    .taxonomy-head { display: grid; gap: 7px; }
    .taxonomy-main-form { grid-template-columns: minmax(0, 1fr) 32px 32px; }
    .taxonomy-main-form__meta { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
    .taxonomy-main-form__name { grid-column: 1; }
    .taxonomy-org-form { grid-template-columns: 1fr; }
    .taxonomy-org-form__description { grid-column: auto; }
    .taxonomy-org-form__actions { justify-content: flex-end; }
    .taxonomy-org-lists { grid-template-columns: 1fr; }
    .taxonomy-add { align-items: stretch; flex-wrap: wrap; }
    .taxonomy-add > div { width: 100%; }
    .taxonomy-add > .input { flex: 1 1 180px; width: auto; }
    .guide-table { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .tabs-row--scroll .tab-btn { min-height: 40px; padding: 7px 10px; }
}

.slide-over {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(600px, 92vw);
    z-index: 50;
    background: var(--bg-1);
    border-left: 1px solid var(--border);
    box-shadow: -28px 0 50px -22px rgba(0,0,0,0.55);
    display: flex; flex-direction: column;
    animation: slideIn .22s ease-out;
}
.slide-over-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 45;
    animation: fadeIn .2s ease-out;
    backdrop-filter: blur(2px);
}
@keyframes slideIn { from { transform: translateX(20px); opacity: .85; } to { transform: none; opacity: 1; } }

/* ============================================================
   Detail-modal (центрированное окно деталей карточки)
   Заменил собой slide-over для «Детали группы» — открывается
   крупное окно по центру вместо узкой выезжающей справа панели.
   ============================================================ */
.detail-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.58);
    /* z-index выше всего что есть на странице: dropdown'ы тулбара
       имеют parent z-index: 50, чипы фильтров — z-index 4-5, мобильный
       sidebar/tab-bar до 70. Берём 200 с запасом, чтобы перекрыть всё. */
    z-index: 200;
    animation: fadeIn .14s ease-out;
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    /* safe-area для notched-устройств (iPhone X+) — отступы от
       реальной видимой области, чтобы окно не пряталось под notch'ем
       или под bottom-bar'ом браузера. */
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    box-sizing: border-box;
}
.detail-modal {
    z-index: 201;
    width: min(1040px, 100%);
    max-width: 100%;          /* страховка от случаев когда content внутри
                                 пытается раздвинуть max-width родителя */
    max-height: 94vh;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    /* Не hidden: в теле деталей есть floating-меню «...». На мобильном оно
       position:fixed, но overflow:hidden у модалки всё равно мог его обрезать
       (особенно в Safari/Chrome mobile из-за transform-анимации). Скролл остаётся
       на .detail-modal-body, поэтому лишний overflow у окна не нужен. */
    overflow: visible;
    animation: detailModalIn .16s ease-out;
    box-sizing: border-box;   /* учёт border при расчёте width */
}
.detail-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 6px 12px 6px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-1);
    flex-shrink: 0;
}
.detail-modal-title {
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}
.detail-modal-heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.detail-modal-header-chips {
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.detail-modal-header-chips .chip {
    font-size: var(--type-xs);
    line-height: 1.2;
}
.detail-modal-close {
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 auto;
    border-radius: 999px;
}
.detail-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 22px;
    -webkit-overflow-scrolling: touch;
}
@keyframes detailModalIn {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
/* На мобиле — отступы с запасом, чтобы окно не упиралось в края экрана
   и safe-area не пряталась. С запасом 12px по краям + safe-area-inset
   суммируются (max() уже работает в overlay-padding). */
@media (max-width: 640px) {
    .detail-modal-overlay {
        padding: 12px;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .detail-modal { max-height: 94vh; border-radius: var(--radius); }
    .detail-modal-header { min-height: 52px; padding: 4px 8px 4px 12px; }
    .detail-modal-close { width: 44px; height: 44px; min-height: 44px; }
    .detail-modal-body { padding: 14px 14px 18px; }
}

/* Детали редакторской карточки: сначала содержание и действия, затем
   раскрываемые служебные слои. Поверхности не вкладываются друг в друга. */
.detail-editorial-layout {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.detail-editorial-head {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-bottom: 16px;
}
.detail-header-statuses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.detail-editorial-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 600;
    line-height: 1.25;
}
.detail-editorial-summary {
    max-width: 78ch;
    color: var(--text-dim);
    font-size: var(--type-md);
    line-height: 1.55;
}
.detail-editorial-meta,
.detail-editorial-category,
.detail-source-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--type-sm);
}
.detail-editorial-category__label {
    color: var(--text-mute);
}
.detail-source-strip {
    padding: 0 0 16px;
}
.detail-editorial-layout > .detail-primary-media,
.detail-editorial-layout > .detail-video-section {
    margin-bottom: 18px;
}
.detail-section {
    margin: 0;
    padding: 17px 0;
    border: 0;
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
}
.detail-section > summary,
.detail-disclosure > summary {
    list-style: none;
}
.detail-section > summary::-webkit-details-marker,
.detail-disclosure > summary::-webkit-details-marker {
    display: none;
}
.detail-section__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text);
    font-size: var(--type-sm);
    font-weight: 600;
    cursor: pointer;
}
.detail-empty-state {
    margin-top: 10px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.detail-materials__head {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.detail-materials__head h3 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-sm);
    font-weight: 600;
}
.detail-materials__head h3 span,
.detail-materials__selected {
    color: var(--text-mute);
    font-weight: 500;
}
.detail-materials__copy { margin-left: auto; }
.detail-materials__icon-action {
    width: 34px;
    height: 34px;
    min-height: 34px;
}
.detail-materials__sort {
    min-height: 34px;
    color: var(--text-dim);
}
.detail-raw-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--text);
    font-size: var(--type-md);
    line-height: 1.35;
}
.detail-raw-action.detail-source-toggle {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin-top: -5px;
}
.detail-disclosure {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
}
.detail-disclosure__summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    color: var(--text-dim);
    cursor: pointer;
}
.detail-disclosure__summary::after {
    content: "⌄";
    margin-left: auto;
    color: var(--text-mute);
    font-size: var(--type-sm);
    transition: transform .12s ease;
}
.detail-disclosure[open] > .detail-disclosure__summary::after {
    transform: rotate(180deg);
}
.detail-disclosure__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: var(--type-sm);
    font-weight: 600;
}
.detail-note__preview {
    min-width: 0;
    flex: 1 1 180px;
    overflow: hidden;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-disclosure__body {
    padding: 0 0 17px;
}
.detail-technical-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.detail-technical-block {
    padding: 15px 0;
    border-top: 1px solid var(--border-soft);
    background: transparent;
    font-size: var(--type-sm);
}
.detail-technical-block:first-child {
    padding-top: 2px;
    border-top: 0;
}
@media (max-width: 640px) {
    .detail-editorial-title { font-size: var(--type-title); }
    .detail-editorial-summary { font-size: var(--type-body); }
    .detail-materials__head { gap: 5px; }
    .detail-materials__sort { width: 100%; justify-content: flex-start; }
    .detail-disclosure__summary { min-height: 48px; }
}

/* ============================================================
   Extract-bar — липкий нижний бар выбора материалов в «Деталях
   группы» (partials/feed_details.html, блок «Материалы группы»).
   position:sticky;bottom:0 внутри .detail-modal-body (там overflow-y:
   auto) — бар «прилипает» к низу окна, пока редактор скроллит список
   материалов, и показывает превью того, что вытащится в новые группы.
   Аналог нижнего бара объединения (.sel-bar).
   ============================================================ */
.extract-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 4px;
    padding: 9px 11px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
.extract-bar__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.extract-bar__count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--type-sm);
    color: var(--text);
    white-space: nowrap;
}
.extract-bar__count b { color: var(--accent); }
.extract-bar__preview {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 7px;
    max-height: 58px;
    overflow-y: auto;
}
.extract-bar__plabel {
    font-size: var(--type-xs);
    color: var(--text-mute);
    white-space: nowrap;
    flex-shrink: 0;
}
.extract-bar__chip {
    font-size: var(--type-xs);
    color: var(--text-dim);
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 2px 6px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Feed-pending pill — «N новых материалов»
   Появляется сверху Ленты когда SSE сообщает о новых изменениях,
   но автообновление грида не делается, чтобы не сбивать редактора.
   Клик по пиллу — обновляет грид и сбрасывает счётчик.
   ============================================================ */
.feed-pending-pill-container {
    position: sticky;
    top: 8px;
    z-index: 30;
    display: flex;
    justify-content: center;
    pointer-events: none;       /* контейнер не мешает кликам ниже */
    margin: 0 0 10px 0;
}
.feed-pending-pill {
    pointer-events: auto;        /* саму кнопку — кликабельной */
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: var(--type-body);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25),
                0 1px 3px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    animation: feedPendingPillIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.25);
    white-space: nowrap;
}
.feed-pending-pill:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    transition: filter 0.12s, transform 0.12s;
}
.feed-pending-pill:active { transform: translateY(0); }
.feed-pending-pill svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
}
@keyframes feedPendingPillIn {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* ============================================================
   Фаза 2 системы тревог (#448): пилл всплеска + подсветка карточки-виновника.
   Навешивается только когда бэкенд отдаёт тревоги (ALERT_SIGNAL_LIVE=1);
   при OFF классы никогда не появляются в DOM.
   ============================================================ */
.feed-alert-pill-container {
    position: sticky;
    top: 8px;
    z-index: 30;
    display: flex;
    justify-content: center;
    pointer-events: none;
    margin: 0 0 8px 0;
}
.feed-alert-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--warn-border);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: var(--type-ui);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    animation: feedAlertPillIn 0.25s ease-out;
}
.feed-alert-pill:hover { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.feed-alert-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Единая зона live-сигналов: обновления, важный всплеск и смена порядка
   занимают одно место и не перекрывают карточки друг другом. */
.feed-live-notices {
    position: sticky;
    top: 8px;
    z-index: 31;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    pointer-events: none;
}
.feed-live-notices > .feed-pending-pill-container,
.feed-live-notices > .feed-alert-pill-container,
.feed-live-notices > .feed-order-pill-container {
    position: static;
    top: auto;
    z-index: auto;
    display: flex;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}
.feed-order-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    max-width: min(560px, calc(100vw - 32px));
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
    color: var(--text-dim);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: var(--type-ui);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.feed-order-pill:hover {
    border-color: var(--accent-border);
    color: var(--text);
    background: var(--bg-2);
}
.feed-order-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 720px) {
    .feed-live-notices {
        top: 4px;
        gap: 4px;
        margin-bottom: 6px;
    }
    .feed-pending-pill,
    .feed-alert-pill,
    .feed-order-pill {
        max-width: calc(100vw - 24px);
        padding: 6px 10px;
        font-size: var(--type-xs);
    }
    .feed-pending-pill span,
    .feed-alert-pill span,
    .feed-order-pill span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@keyframes feedAlertPillIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Тревожная карточка: заметный, но не мигающий янтарный контур. */
.cluster-card.card-alert {
    border-color: var(--warn-border) !important;
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--warn) 7.5%, transparent) 0,
        color-mix(in srgb, var(--warn) 3.5%, transparent) 24%,
        transparent 62%);
    outline: 1px solid color-mix(in srgb, var(--warn) 24%, transparent);
    outline-offset: -2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 18%, transparent),
                0 0 10px 1px color-mix(in srgb, var(--warn) 10%, transparent);
    position: relative;
}
.cluster-card.card-alert::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid transparent;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--warn) 8%, transparent),
        color-mix(in srgb, var(--warn) 46%, transparent),
        color-mix(in srgb, var(--warn) 10%, transparent)) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    background-size: 220% 220%;
    animation: cardAlertBorderFlow 4.6s linear infinite;
}
.cluster-card.has-alert-event .cluster-cat-ic {
    color: var(--warn);
}
.cluster-card.card-alert-focus {
    border-color: color-mix(in srgb, var(--warn) 72%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 42%, transparent),
                0 0 18px 2px color-mix(in srgb, var(--warn) 24%, transparent);
    animation: cardAlertFocus 1.8s ease-out 1;
}
@keyframes cardAlertBorderFlow {
    from { background-position: 0% 50%; }
    to   { background-position: 220% 50%; }
}
@keyframes cardAlertFocus {
    0%   { transform: translateY(-1px); }
    35%  { transform: translateY(-2px); }
    100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cluster-card.card-alert::after,
    .cluster-card.card-alert-focus {
        animation: none;
    }
}

.dropdown {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 4px; min-width: 200px;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.35), var(--shadow-card);
}
/* Прокручиваемая внутренняя область dropdown'а с поиском.
   min-height: 0 на flex-child обязателен — иначе overflow: auto не
   активируется (flex-item по дефолту min-height: auto, и он раздувается
   до размера контента). Это та самая известная гадость CSS-flex'а. */
.dropdown-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
    -webkit-overflow-scrolling: touch;  /* плавный скролл на iOS */
}

/* Триггер dropdown'а в форме «как у select». Раньше использовали
   class="select", и получалось ДВЕ стрелки: одна фоном из .select
   (background-image: chevron), вторая в DOM (наш <span>▾</span>).
   Здесь — отдельный стиль без фона, и стрелка только из DOM. */
.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 5px 10px;
    /* bg-2 — как у нативного .select: dropdown-триггеры (тип источника /
       источники / страны) раньше были на bg-1 и «сливались» с панелью
       «Настроить», а рядом стоящие селекты были на bg-2 — фон контролов
       выглядел разнобойным. Теперь все контролы-триггеры одного фона. */
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: var(--type-ui);
    line-height: 20px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dropdown-trigger:hover {
    border-color: var(--text-mute);
}
.dropdown-trigger:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.dropdown-trigger .dropdown-trigger-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown-trigger .dropdown-trigger-arrow {
    opacity: 0.55;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: transform .15s ease, opacity .15s ease;
}
.dropdown-trigger[aria-expanded="true"] .dropdown-trigger-arrow {
    opacity: 0.85;
    transform: rotate(180deg);
}

/* Открытая панель dropdown'а с фильтрами/поиском и прокручиваемым
   списком. Скролл — на самом панеле (не на flex-child!), это
   надёжнее для разных браузеров. Поиск и заголовочные кнопки
   делаем sticky чтобы они оставались видны при прокрутке. */
.dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
}
.dropdown-panel-header {
    position: sticky;
    top: -6px;  /* компенсируем padding контейнера, чтобы прижалось к самому верху */
    background: var(--bg-1);
    z-index: 1;
    padding: 6px 4px 6px;
    margin: -6px -4px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dropdown-panel-header .dropdown-search-input {
    flex: 1 1 0;
    min-width: 0;
}
.dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 6px;
    font-size: var(--type-ui); cursor: pointer;
    color: var(--text);
    background: transparent; border: none;
    width: 100%; text-align: left; font-family: inherit;
    transition: background .12s;
}
.dropdown-item:hover { background: var(--bg-2); }
.dropdown-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-soft); }

/* Eff-5: вложенное sub-меню (например «В тему» внутри «Ещё»).
   Десктоп: открывается ВПРАВО от родительского пункта.
   Мобильный (<640px): открывается ВЛЕВО, чтобы не вылетать за viewport
   (родительский dropdown уже прижат к правому краю экрана).
   max-width защищает от уползания за левый край после reverse. */
.dropdown-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 4px;
    min-width: 200px;
    max-width: calc(100vw - 32px);
}
@media (max-width: 640px) {
    .dropdown-submenu {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 4px;
    }
}

/* Меню «Ещё ▾» на карточке Ленты. Десктоп: absolute под кнопкой, прижато
   к правому краю карточки. Раньше это позиционирование было инлайном в
   шаблоне — перенесли в CSS, чтобы мобильный media-query мог его
   переопределить (инлайн-стиль перебил бы внешний CSS без !important). */
/* Обёртка кнопки «Ещё ▾». Десктоп: относительный контейнер — меню
   позиционируется от самой кнопки (прижато к правому краю карточки). Мобайл
   (ниже): обёртку делаем static → offsetParent меню становится .cluster-card
   (у неё position:relative), и меню якорится к карточке, а не к кнопке. */
.cluster-more-wrap { position: relative; }
.cluster-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 100;
}
@media (max-width: 640px) {
    /* На узком экране раньше меню прижималось right:0 к КНОПКЕ и при большой
       min-width уезжало влево за край экрана. Теперь якорим его к САМОЙ
       карточке: обёртку делаем static → offsetParent = .cluster-card
       (position:relative). Меню растягиваем во всю ширину карточки с отступами
       8px по бокам — гарантированно в пределах карточки (а значит и экрана),
       ничего не уезжает. Раскрывается вниз, под карточку.
       Под-меню «В тему» делаем инлайн (ниже), чтобы flyout не уезжал вбок. */
    .cluster-more-wrap { position: static; }
    .cluster-more-menu {
        position: absolute;
        left: 8px;
        right: 8px;
        top: calc(100% + 4px);
        bottom: auto;
        min-width: 0;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    /* Под-меню «В тему» внутри шторки — инлайн (не flyout): раскрывается вниз
       и скроллится вместе со шторкой, поэтому ничего не уезжает за боковые
       края. Перебивает общий мобильный .dropdown-submenu выше за счёт большей
       специфичности (два класса + потомок). */
    .cluster-more-menu .dropdown-submenu {
        position: static;
        left: auto;
        right: auto;
        margin: 4px 0 0 0;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        background: var(--bg-2);
    }
}

/* Детали карточки: тот же toolbar живёт внутри модалки, а не внутри
   .cluster-card. Общий мобильный режим выше якорит «Ещё» к карточке
   (через .cluster-more-wrap { position: static }), поэтому в модалке меню
   могло открываться «куда-то под окно» или обрезаться скролл-контейнером.
   В деталях на телефоне показываем меню как небольшую нижнюю шторку поверх
   модалки: оно не зависит от координат кнопки и не прячется под overlay. */
#detail-modal-body .cluster-more-wrap {
    position: relative;
    z-index: 230;
}
#detail-modal-body .cluster-more-menu {
    z-index: 231;
}
@media (max-width: 640px) {
    #detail-modal-body .cluster-more-wrap {
        position: relative;
    }
    #detail-modal-body .cluster-more-menu {
        position: fixed;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        min-width: 0;
        max-width: none;
        max-height: min(70vh, 520px);
        z-index: 240;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    #detail-modal-body .cluster-more-menu .dropdown-submenu {
        position: static;
        left: auto;
        right: auto;
        margin: 4px 0 0 0;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        background: var(--bg-2);
    }
}

/* UpdateUX: чип «+N» — материалы пришли после публикации/обработки.
   Жёлтый фон с тёмным текстом — заметный, но не агрессивно-красный
   (это не ошибка, а просто новость). Координируется с has-post-update
   border-left:--warn и со стек-перекраской. */
.cluster-updates-chip {
    background: var(--warn-soft);
    border-color: var(--warn-border);
    color: var(--text);
    font-weight: 600;
    font-size: var(--type-xs);
}

/* Точка 2: подсказка «Похоже на опубликованное» — неразрушающий чип о
   возможном пропущенном дубле. Визуально отделён от обычных чипов карточки:
   мягкая info-плашка на всю ширину с двумя действиями справа. Не кричит,
   но заметен — это рекомендация, не алерт. */
.dup-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin: 8px 0 0 0;
    padding: 6px 10px;
    background: var(--info-soft);
    border: 1px solid var(--info-border);
    border-radius: 8px;
    font-size: var(--type-sm);
}
.dup-suggest-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--text);
}
.dup-suggest-text .lucide { color: var(--info); flex-shrink: 0; }
.dup-suggest-label { color: var(--text-mute); white-space: nowrap; }
.dup-suggest-cand {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--info);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.dup-suggest-cand:hover { text-decoration: underline; }
.dup-suggest-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .dup-suggest-actions { width: 100%; }
    .dup-suggest-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* UpdateUX: подсветка raw_items в Деталях которые пришли ПОСЛЕ
   финализации — жёлтая полоска слева + чуть осветлённый фон, как
   подсвечивают «новые сообщения» в мессенджерах. Метка «новый»
   справа от заголовка строки. */
.detail-raw-item--new {
    /* Рамка со всех сторон жёлтая — материал пришёл ПОСЛЕ финализации
       (publish/processed), редактор должен сразу его заметить в списке.
       Перекрывает дефолтный border-slate-800/70 у <article>: !important
       нужен потому что tailwind-классы применяются на самом элементе и
       без override наша рамка проигрывает специфичности. */
    border: 1.5px solid var(--warn) !important;
    background: color-mix(in srgb, var(--warn) 6%, transparent);
}
/* У47: подсветка материалов от выбранного источника при клике по чипу источника.
   Снимается через 2.5 сек таймером в details_modal.html. */
.detail-raw-item--focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: var(--accent-soft);
    animation: detail-raw-focus-pulse 0.6s ease-in-out 2;
}
@keyframes detail-raw-focus-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}
.detail-raw-item--new-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--warn-soft);
    color: var(--text);
    font-size: var(--type-2xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
/* 2A: бэйдж «↻ перепост» — серый, тише жёлтого «новый факт».
   Применяется к raw_items с is_repost_after_finalize=1: пришли после
   публикации, но NER не нашёл новых сущностей. */
.detail-raw-item--repost-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-1);
    color: var(--text-mute);
    border: 1px solid var(--border-soft);
    font-size: var(--type-2xs);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
/* В1: read-time подсказка рядом с «🆕 новый факт» — какие именно сущности
   добавил материал (NER-диф). Тише самого бэйджа: приглушённый текст без
   плашки, чтобы читалось как пояснение, а не как ещё один статус. Это
   подсказка по разметке, а НЕ проверенный факт — отсюда мягкий вид. */
.detail-raw-item--new-entities {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 500;
    margin-left: 6px;
    vertical-align: middle;
}
/* Жёлтый чип сущности рядом с «новое:» — каждая новая сущность
   показывается как тёплый тег (warn-токены), а не просто жирный текст. */
.detail-raw-item--new-entities .detail-new-entity-chip {
    display: inline-block;
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn-border);
    border-radius: 4px;
    padding: 0 6px;
    font-weight: 600;
    font-size: var(--type-xs);
    line-height: 1.55;
    vertical-align: baseline;
}

/* ── Карточка материала в «Деталях группы» — оформление (красота/удобство).
   Базовый класс .detail-raw-item навешен на каждый <article>. Сами border/bg
   материал берёт из tailwind-утилит в разметке; здесь только добавляем
   плавность и состояния hover/выбран — селекторы с псевдоклассами/:has
   перебивают статичные утилиты по специфичности, поэтому базовый вид не
   трогаем (и не воюем со специфичностью). */
.detail-raw-item:not(.detail-raw-item--new) {
    border-color: var(--border-soft) !important;
    border-radius: var(--radius) !important;
    background: transparent !important;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
/* Наведение — рамка чуть светлее, фон еле заметно подсвечен. На «новых»
   (--new, !important жёлтая рамка) цвет рамки не меняем — статус важнее. */
.detail-raw-item:not(.detail-raw-item--new):hover {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--bg-2) 55%, transparent) !important;
}
/* Выбран чекбоксом — акцентная рамка + мягкий фон, чтобы перед
   «вытащить» сразу было видно что отмечено. :has(:checked) специфичнее
   :hover, поэтому выбранное состояние выигрывает. Прогрессивное улучшение:
   в браузерах без :has() просто нет подсветки, ничего не ломается. */
.detail-raw-item:has(input[name="raw_item_ids"]:checked) {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    box-shadow: inset 0 0 0 1px var(--accent);
}
/* Компактные icon-кнопки «копировать» / «источник» в мета-строке материала —
   без текстовых подписей (подсказка в title/aria-label), чтобы не шуметь. */
.detail-raw-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--text-mute);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.detail-raw-action:hover {
    background: var(--bg-2);
    color: var(--text);
}

/* Eff-10: липкая шапка табов Ленты на мобиле. При прокрутке вниз табы
   (Лента / В работе / Скрыто / Обработано / …) остаются прижатыми к
   верху viewport — редактор не теряет ориентацию «где я» и быстро
   переключается. На десктопе шапка не липнет (не нужно, экран шире). */
@media (max-width: 768px) {
    .feed-tabs-sticky {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--bg-0);
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border-soft);
    }
}

.feed-tabs-sticky {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0 0 10px;
}
.feed-tabs-track {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.feed-primary-tabs {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0;
}
.feed-primary-tabs button {
    min-height: 38px;
    padding: 6px 12px;
}
.feed-secondary-tabs {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
}
.feed-secondary-tabs .btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 40px;
    min-height: 40px;
    padding: 6px 9px;
    color: var(--text-mute);
    border-color: transparent;
    background: transparent;
}
.feed-secondary-tabs .btn:hover,
.feed-secondary-tabs .btn.is-active {
    color: var(--text);
    background: var(--bg-2);
}
@media (max-width: 768px) {
    .feed-tabs-sticky {
        flex-wrap: nowrap;
        margin-inline: -2px;
    }
    .feed-tabs-track {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 1px 2px 3px;
        scrollbar-width: none;
    }
    .feed-tabs-track::-webkit-scrollbar { display: none; }
}

/* Короткая справка Ленты открывается из меню «…». */
.feed-help-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(380px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px -12px rgba(0,0,0,0.45), var(--shadow-card);
    z-index: 60;
    font-size: var(--type-body);
    line-height: 1.5;
    color: var(--text);
}

.feed-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    background: var(--bg-1);
}
.feed-help-head strong { font-size: var(--type-md); }

.feed-help-body { padding: 12px 14px 15px; }

.feed-help-lead {
    margin: 0 0 12px;
    color: var(--text-dim);
}

.feed-help-sect {
    font-size: var(--type-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    margin: 14px 0 6px;
}
.feed-help-sect:first-child { margin-top: 0; }

.feed-help-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.feed-help-list li { margin: 0; }
.feed-help-list b { color: var(--text); }
.feed-help-list u { text-decoration-color: var(--accent-border); }

.feed-help-note {
    margin: 0;
    color: var(--text-dim);
}

/* SEGMENTED CONTROL — компактные «таблетки» в общей обойме.
   Используется для таб-навигации по статусам в Ленте. */
.segmented {
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px;
    gap: 2px;
    flex-wrap: wrap;
}
.segmented button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--type-ui); font-weight: 500;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.segmented button:hover { color: var(--text); }
.segmented button.active {
    background: var(--bg-1);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.segmented--compact {
    padding: 2px;
    border-radius: 8px;
}
.filter-bar .segmented--compact {
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
}
.segmented--compact button {
    padding: 4px 9px;
    border-radius: 6px;
    font-size: var(--type-sm);
}

/* Навигация между двумя близкими представлениями одной сущности. */
.view-switch {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-2);
}
.view-switch a,
.view-switch > span {
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}
.view-switch a:hover { color: var(--text); }
.view-switch .is-active {
    color: var(--text);
    background: var(--bg-1);
}
/* Числа на табах «Лента» / «В работе» — без подложки, просто моно-цифры
   приглушённого цвета. На активной вкладке цифры подсвечиваются акцентом —
   тот же тон, что и сама подложка активного таба, чтобы взгляд не цеплялся
   за «двойной маркер» (фон вокруг + плашка под цифрой). */
.segmented .seg-count {
    display: inline-block;
    padding: 0;
    background: transparent;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    font-weight: 600;
    line-height: 1.4;
    min-width: 14px;
    text-align: center;
}
.segmented button.active .seg-count {
    color: var(--accent);
    background: transparent;
}

/* Переключатель и подробный evidence-разбор фактов в деталях карточки. */
.facts-summary-main {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}
.facts-summary-title {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
}
.fact-view-switch {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    border-radius: 7px;
    vertical-align: middle;
}
.fact-view-switch button {
    min-height: 0;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: var(--type-2xs);
    font-weight: 600;
    line-height: 1.45;
}
.fact-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 7px;
}
.fact-detail-item {
    padding: 8px 2px 8px 24px;
    border-bottom: 1px solid var(--border);
}
.fact-detail-item:last-child {
    border-bottom: 0;
}
.fact-detail-item[data-evidence-status="contradicts"] {
    margin: 2px -5px;
    padding-right: 7px;
    padding-left: 29px;
    border-bottom-color: transparent;
    border-radius: 6px;
    background: var(--danger-soft);
}
.fact-detail-item[data-evidence-status="contradicts"] .num {
    left: 5px;
    color: var(--danger);
}
.fact-detail-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.fact-detail-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 3px;
}
.fact-detail-head .chip {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: var(--type-2xs);
    line-height: 1.3;
}
.fact-detail-confidence {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.fact-detail-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.45;
}
.fact-detail-source {
    display: inline-flex;
    align-items: center;
    color: var(--text-mute);
}
.fact-detail-source:hover {
    color: var(--accent);
}
.fact-detail-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 5px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--danger);
    font-size: var(--type-xs);
    line-height: 1.4;
}
.fact-detail-warning--soft {
    color: var(--warn);
}
.fact-detail-evidence {
    margin: 5px 0 0;
    padding: 5px 7px;
    border: 0;
    border-left: 2px solid var(--accent-border);
    border-radius: 0 4px 4px 0;
    background: var(--bg-2);
}
.fact-detail-evidence-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.fact-detail-evidence-label span {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.fact-detail-evidence blockquote {
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    color: var(--text-dim);
    font-size: var(--type-xs);
    line-height: 1.4;
}
.fact-detail-evidence--empty {
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
}
@media (max-width: 640px) {
    .facts-panel > summary { align-items: flex-start !important; }
    .facts-summary-main { align-items: flex-start; flex-direction: column; gap: 5px; }
}

/* Категории Ленты: один компактный выбор вместо горизонтальной полосы чипов.
   Счётчики сохранены как обычные цифры, без дополнительных цветных пилюль. */
.feed-category-picker {
    position: relative;
    flex: 0 1 270px;
    min-width: 210px;
    z-index: 45;
}
.feed-category-picker > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-1);
    color: var(--text-dim);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.feed-category-picker > summary::-webkit-details-marker { display: none; }
.feed-category-picker > summary:hover,
.feed-category-picker[open] > summary {
    color: var(--text);
    border-color: var(--text-mute);
}
.feed-category-picker > summary > svg:first-child { flex: 0 0 auto; color: var(--text-mute); }
.feed-category-picker > summary > svg:last-child { flex: 0 0 auto; margin-left: auto; transition: transform .15s ease; }
.feed-category-picker[open] > summary > svg:last-child { transform: rotate(180deg); }
.feed-category-picker__title { flex: 0 0 auto; color: var(--text); font-weight: 600; }
.feed-category-picker__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-category-picker__count,
.feed-category-picker__option-count {
    flex: 0 0 auto;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.feed-category-picker__menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: min(480px, calc(100vw - 32px));
    max-height: min(62vh, 520px);
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-1);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55), var(--shadow-card);
}
.feed-category-picker__option--all {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--border);
    border-radius: 4px 4px 0 0;
}
.feed-category-picker__group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 5px 2px 2px;
}
.feed-category-picker__group-title {
    padding: 3px 7px 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
}
.feed-category-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    min-height: 36px;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.feed-category-picker__option > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-category-picker__option:hover,
.feed-category-picker__option.is-active { background: var(--bg-2); color: var(--text); }
.feed-category-picker__option.is-active { font-weight: 600; }
.feed-category-picker__option.is-empty:not(.is-active) { opacity: .55; }
.feed-category-picker__check { display: inline-flex; color: var(--text-mute); }
@media (max-width: 560px) {
    .feed-category-picker { flex: 1 1 100%; min-width: 0; }
    .feed-category-picker__menu { grid-template-columns: minmax(0, 1fr); width: 100%; }
}

.toast {
    position: fixed; bottom: 18px; right: 18px;
    /* Global notification layer: must stay above detail/selection modals,
       map popups and route-local overlays. Individual toast items keep
       pointer-events:auto, while the empty container remains click-through. */
    z-index: 2147483000;
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 8px; pointer-events: none;
}
.toast .toast-item {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    width: min(370px, calc(100vw - 36px));
    padding: 10px 9px 10px 11px;
    border-radius: 8px;
    background: var(--bg-1); border: 1px solid var(--border);
    font-size: var(--type-ui);
    color: var(--text);
    box-shadow: 0 7px 20px -12px rgba(0,0,0,0.5);
    animation: toastIn .2s ease-out;
}
.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--info);
}
.toast-ok .toast-icon { color: var(--success); }
.toast-warn .toast-icon { color: var(--warn); }
.toast-bad .toast-icon { color: var(--danger); }
.toast-content { min-width: 0; line-height: 1.35; }
.toast-title { color: var(--text); font-size: var(--type-xs); font-weight: 600; }
.toast-message { margin-top: 1px; color: var(--text-dim); overflow-wrap: anywhere; }
.toast-item:not(.has-title) .toast-message { margin-top: 0; color: var(--text); }
.toast-actions { display: flex; align-items: center; gap: 6px; }
.toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
}
.toast-close:hover { background: var(--bg-3); color: var(--text); }
.toast-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.toast-item.is-leaving { opacity: 0; transform: translateY(5px); transition: opacity .18s, transform .18s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
    .toast { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
    .toast .toast-item { width: 100%; }
    .toast-actions .btn { padding-inline: 9px; }
}

.app-connection-status {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 2147482990;
    display: none;
    align-items: center;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-1) 94%, transparent);
    color: var(--text-dim);
    box-shadow: 0 8px 24px -10px rgba(0,0,0,.4);
    backdrop-filter: blur(12px);
    font-size: var(--type-xs);
    font-weight: 600;
}
.app-connection-status.is-visible { display: inline-flex; }
.app-connection-status.is-offline {
    border-color: var(--warn-border);
    color: var(--warn);
}
.app-connection-status.is-online {
    border-color: var(--success-border);
    color: var(--success);
}
@media (max-width: 640px) {
    .app-connection-status {
        left: 50%;
        bottom: 76px;
        transform: translateX(-50%);
        white-space: nowrap;
    }
}
.progress-track { width: 100%; height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--text-dim); border-radius: 999px; transition: width .4s; }
.progress-bar.done, .progress-bar.is-done { background: var(--success); }
.progress-track--thin { height: 3px; }
.progress-track--wide { height: 8px; }
.progress-bar--info { background: var(--info); }
.progress-bar--warn { background: var(--warn); }
.progress-bar--danger { background: var(--danger); }
.progress-bar.is-indeterminate {
    width: 42%;
    background: var(--accent);
    animation: progressIndeterminate 1.25s ease-in-out infinite;
}
@keyframes progressIndeterminate {
    from { transform: translateX(-110%); }
    to { transform: translateX(245%); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner,
    .btn.is-requesting::before,
    .progress-bar.is-indeterminate,
    .app-loading-bar { animation-duration: 2.4s; }
}

/* ============================================================
   Tables / Empty / Forms
   ============================================================ */
.table, .app-table { width: 100%; border-collapse: collapse; font-size: var(--type-body); }
.table-shell {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--bg-1);
    scrollbar-width: thin;
}
.table-shell > .table,
.table-shell > .app-table { min-width: 100%; }
.table-shell--bare {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.table th, .table td,
.app-table th, .app-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left; vertical-align: top;
}
.table th, .app-table th {
    color: var(--text-mute); font-weight: 500;
    font-size: var(--type-xs); text-transform: uppercase; letter-spacing: 0.06em;
    font-family: var(--font-sans);
}
.table tr:last-child td, .app-table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td, .app-table tbody tr:hover td { background: var(--bg-3); }
.table td code, .app-table td code {
    font-family: var(--font-mono); font-size: var(--type-sm); color: var(--text-dim);
}
.table--compact { font-size: var(--type-sm); }
.table--compact th, .table--compact td,
.app-table--compact th, .app-table--compact td {
    padding: 7px 8px;
    font-size: var(--type-sm);
}
.table--wide { min-width: 760px; }
.table-shell > .table--wide { min-width: 760px; }
.table .is-number,
.app-table .is-number {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.table .is-muted,
.app-table .is-muted { color: var(--text-mute); }
.table .is-truncate,
.app-table .is-truncate {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table tr.is-error td,
.app-table tr.is-error td { background: var(--danger-soft); }
.table tr.is-dim,
.app-table tr.is-dim { opacity: 0.5; }
.empty-state--compact {
    padding: 8px 0;
    font-size: var(--type-sm);
}

.cleanup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.check-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px; border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    cursor: pointer; transition: .15s;
    background: var(--bg-1);
}
.check-card:hover { background: var(--bg-2); border-color: var(--border); }
.check-card .ti { font-weight: 600; font-size: var(--type-body); color: var(--text); }
.check-card .desc { font-size: var(--type-sm); color: var(--text-mute); }

.card-view-designer {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 560px);
    gap: 14px;
    align-items: start;
}
.card-view-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.card-view-preview {
    position: sticky;
    top: 14px;
    padding: 14px;
    min-width: 0;
    overflow: hidden;
}
.cv-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.cv-preset-grid,
.cv-preview-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cv-preview-tools {
    margin: -2px 0 12px;
}
.cv-preset-grid .btn.is-active,
.cv-preview-tools .btn.is-active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: var(--accent-soft);
}
.cv-section-title {
    font-size: var(--type-sm);
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 8px;
}
.cv-label {
    font-size: var(--type-sm);
    font-weight: 700;
    color: var(--text-mute);
    margin: 0 0 6px;
}
.cv-muted,
.cv-save-hint {
    color: var(--text-mute);
    font-size: var(--type-sm);
    line-height: 1.4;
}
.cv-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.cv-bool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.cv-option {
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
}
.cv-option b {
    display: block;
    font-size: var(--type-xs);
}
.cv-option .desc {
    display: block;
    margin-top: 2px;
}
.cv-range-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.cv-range {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: var(--type-sm);
    color: var(--text);
}
.cv-range b {
    color: var(--accent);
    font-family: var(--font-mono);
}
.cv-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.cv-preview-error {
    margin: 8px 0 0 0;
    font-size: var(--type-xs);
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    border-radius: 8px;
    padding: 6px 10px;
}
.cv-preview-orig {
    margin: 4px 0 0 0;
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    color: var(--text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-hidden {
    display: none !important;
}
.card-view-preview .cluster-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    transition: max-width .16s ease, padding .16s ease;
}
.card-view-preview .cluster-card[data-cv-width="narrow"] {
    max-width: 320px;
}
.card-view-preview .cluster-card[data-cv-width="normal"],
.card-view-preview .cluster-card:not([data-cv-width]) {
    max-width: 420px;
}
.card-view-preview .cluster-card[data-cv-width="wide"] {
    max-width: 560px;
}
.card-view-preview .cluster-card.stack-2 {
    margin-bottom: 10px;
}
.card-view-preview .cluster-toolbar {
    min-width: 0;
}
.card-view-preview .cluster-toolbar .btn {
    white-space: nowrap;
}
.card-view-preview .cluster-title {
    overflow-wrap: anywhere;
}
.card-view-preview .cluster-chips {
    min-width: 0;
}
.card-view-preview .cluster-card.card-view-chipflow-nowrap .cluster-chips {
    mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.card-view-preview .cluster-card.card-view-left-hidden .cluster-body {
    grid-column: 1 / -1;
}
.card-view-preview .cluster-card[data-cv-width="narrow"] .cluster-toolbar .spacer {
    display: none;
}

@media (max-width: 1050px) {
    .card-view-designer {
        grid-template-columns: 1fr;
    }
    .card-view-preview {
        position: static;
    }
}
@media (max-width: 700px) {
    .cv-grid-2 {
        grid-template-columns: 1fr;
    }
    .cv-actions {
        justify-content: stretch;
        align-items: stretch;
        flex-direction: column;
    }
}

.form-stack { display: flex; flex-direction: column; gap: 12px; }
.form-row { margin-bottom: 14px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-options { display: flex; flex-direction: column; gap: 10px; }
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.switch-row__copy,
.check-row__copy { min-width: 0; }
.switch-row__title,
.check-row__title {
    display: block;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 500;
    line-height: 1.35;
}
.switch-row__hint,
.check-row__hint {
    display: block;
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.4;
}
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: var(--text-dim);
    cursor: pointer;
    font-size: var(--type-body);
}
.check-row > input { flex: none; margin-top: 1px; }
.check-row--nested { padding-left: 28px; }
.check-row--disabled { cursor: not-allowed; opacity: 0.55; }
.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}
.textarea--short { min-height: 60px; }

@media (max-width: 640px) {
    .form-grid-2,
    .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .field-inline { align-items: stretch; flex-direction: column; }
    .field-inline > .btn { width: 100%; }
    .form-toolbar > .field { max-width: none; }
    .form-toolbar > .btn { flex: 1 1 100%; }
    .form-actions > .btn { flex: 1 1 auto; }
}

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

/* ============================================================
   App-specific cards
   ============================================================ */

/* Source card */
.source-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 11px 12px;
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 7px;
    transition: border-color .15s;
}
.source-card:hover { border-color: var(--text-mute); }

/* Значок типа источника в шапке карточки. Иконка = тип (rss/tg/x/сайт/…),
   а ЦВЕТ несёт состояние (source_state): свежие материалы → зелёный,
   ошибка → красный и т.д. Заменяет прежний невнятный цветной кружок —
   редактор с одного взгляда читает «что это и как оно себя чувствует».
   БЕЗ фоновой плашки: раньше иконка 16px тонула в бордюрном квадрате 30px
   (читалось как «пустой высокий прямоугольник» у бесцветных состояний). */
.source-type-icon {
    flex-shrink: 0; margin-top: 1px;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    line-height: 0;
    /* Явно сбрасываем — на всякий случай, чтобы никакой utility-класс
       (напр. был баг: модификатор состояния «empty» матчил глобальный
       .empty с padding:44px + dashed border) не раздувал значок. */
    border: 0; padding: 0; background: none;
}
.source-type-icon svg { width: 20px; height: 20px; display: block; }
/* Модификаторы состояния с префиксом sti-, чтобы не пересекаться с
   глобальными utility-классами (.empty, .off и т.п.). */
.source-type-icon.sti-ok    { color: var(--success); }
.source-type-icon.sti-warn  { color: var(--warn); }
.source-type-icon.sti-bad   { color: var(--danger); }
.source-type-icon.sti-empty { color: var(--text-dim); }
.source-type-icon.sti-off   { color: var(--text-mute); opacity: 0.65; }

.source-title { font-size: var(--type-md); font-weight: 600; line-height: 1.2; color: var(--text); }
.source-url { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* «тех. детали» внутри раскрытой карточки — маленький disclosure-триггер. */
.src-tech > summary {
    cursor: pointer; font-size: var(--type-xs); color: var(--text-mute);
    list-style: none; user-select: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.src-tech > summary::-webkit-details-marker { display: none; }
.src-tech > summary::before { content: "\25B8"; font-size: var(--type-2xs); transition: transform .12s; }
.src-tech[open] > summary::before { transform: rotate(90deg); }
.src-tech > summary:hover { color: var(--text); }

/* Заголовок группы при группировке по редакционному назначению. */
.sources-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}
.sources-page-title { min-width: 0; }
.sources-page-title .page-title { margin: 0; }
.sources-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    margin-top: 5px;
}
.sources-summary .metric-inline { font-size: var(--type-sm); }
.sources-page-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
.sources-toolbar { margin-bottom: 8px; }
.sources-search { width: min(520px, 100%); }
.sources-settings {
    margin: 0 0 12px;
    border: 0;
}
.sources-settings-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    color: var(--text-mute);
    font-size: var(--type-sm);
    list-style: none;
}
.sources-settings-summary::-webkit-details-marker { display: none; }
.sources-settings-summary::marker { content: ""; }
.sources-settings-summary::after {
    content: "›";
    font-size: var(--type-md);
    line-height: 1;
    transition: transform .12s;
}
.sources-settings[open] > .sources-settings-summary::after { transform: rotate(90deg); }
.sources-settings-summary-title { color: var(--text-dim); font-weight: 600; }
.sources-settings-summary-info { font-size: var(--type-xs); }
.sources-settings-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}
.sources-settings-view { display: flex; align-items: end; }

.source-group-head {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 0 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--type-sm); font-weight: 600; color: var(--text-dim);
}
.source-group-head:first-child { margin-top: 0; }
.source-group-head .source-group-count { color: var(--text-mute); font-weight: 500; }

/* Счётчик результатов над гридом источников. */
.sources-count { font-size: var(--type-sm); color: var(--text-mute); margin: 0 0 12px; }
.sources-count b { color: var(--text); font-weight: 600; }
.sources-count-note { color: var(--text-mute); }
/* «Сбросить» — маленькая инлайн-ссылка в строке счётчика. Появляется только
   когда фильтр реально сужает список (см. is_filtered в sources_grid.html). */
.sources-count-reset {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 8px; padding: 1px 3px; border-radius: 3px;
    border: 0; background: none;
    color: var(--text-dim); font-size: var(--type-xs); cursor: pointer; vertical-align: baseline;
    transition: background .12s, border-color .12s, color .12s;
}
.sources-count-reset:hover { color: var(--text); background: var(--bg-2); }
.sources-count-reset svg { width: 11px; height: 11px; }

/* Чипы-фильтр по типу источника (над гридом). */
.source-type-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.source-type-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 4px;
    border: 1px solid transparent; background: transparent;
    color: var(--text-dim); font-size: var(--type-sm); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.source-type-chip:hover { background: var(--bg-2); color: var(--text); }
.source-type-chip.is-active {
    background: var(--bg-2); border-color: var(--border);
    color: var(--text); font-weight: 600;
}
.source-type-chip.is-empty { opacity: 0.5; }
.source-type-chip .stc-count {
    font-size: var(--type-xs); color: var(--text-mute);
    border-radius: 3px; padding: 0 3px; min-width: 14px; text-align: center;
}
.source-type-chip.is-active .stc-count { color: var(--text); }

/* Источники — плоский рабочий список. Редкие поля остаются в диалоге. */
.sources-card-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    border-top: 1px solid var(--border-soft);
}
.sources-card-grid .source-card {
    min-width: 0;
}
.source-card {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, auto) auto;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    padding: 11px 4px;
    background: transparent;
    box-shadow: none;
}
.source-card:hover { border-color: var(--border-soft); background: var(--bg-1); }
.source-card__head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.source-card__head .source-select {
    flex: none;
    margin: 0 1px 0 0;
    cursor: pointer;
}
.source-card__identity,
.source-detail-identity {
    min-width: 0;
    flex: 1;
}
.source-card__head .source-type-icon {
    width: 24px;
    height: 24px;
    margin-top: 0;
}
.source-card__head .source-type-icon svg { width: 20px; height: 20px; }
.source-card__title-line {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.source-card__head .source-title {
    display: -webkit-box;
    overflow: hidden;
    min-width: 0;
    min-height: 1.25em;
    font-size: var(--type-body);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.source-card__passport-warning {
    display: inline-flex;
    flex: none;
    color: var(--warn);
}
.source-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.source-card__badges .chip {
    min-height: 18px;
    padding: 1px 6px;
    font-size: var(--type-2xs);
}
.source-card__id {
    flex: none;
    color: var(--text-mute);
    font: 500 var(--type-2xs)/1.3 var(--font-mono);
}
.source-card__url,
.source-detail-url {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    max-width: 100%;
    color: var(--text-mute);
    font: 500 var(--type-xs)/1.35 var(--font-mono);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-card__url {
    max-width: min(100%, 72ch);
    margin-top: 2px;
    font-size: var(--type-2xs);
}
.source-card__url:hover,
.source-detail-url:hover { color: var(--accent); }
.source-card__url svg,
.source-detail-url svg { flex: none; }
.source-card__summary {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3px 5px;
    min-width: 0;
    min-height: 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.source-card__state {
    flex: none;
    font-weight: 600;
    white-space: nowrap;
}
.source-card__state--ok { color: var(--success); }
.source-card__state--warn { color: var(--warn); }
.source-card__state--bad { color: var(--danger); }
.source-card__state--empty { color: var(--text-dim); }
.source-card__state--off { color: var(--text-mute); }
.source-card__error-line {
    overflow: hidden;
    margin-top: 3px;
    color: var(--danger);
    font-size: var(--type-xs);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--text-dim);
    background: var(--bg-2);
    font-size: var(--type-xs);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
.source-state__dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
.source-state--ok { color: var(--success); background: var(--success-soft); }
.source-state--warn { color: var(--warn); background: var(--warn-soft); }
.source-state--bad { color: var(--danger); background: var(--danger-soft); }
.source-state--empty { color: var(--text-dim); background: var(--bg-2); }
.source-state--off { color: var(--text-mute); background: var(--bg-2); }
.source-card__checked {
    overflow: hidden;
    min-width: 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--border-soft);
}
.source-detail-stats > div {
    min-width: 0;
    padding: 7px 9px;
    background: var(--bg-2);
}
.source-detail-stats dt {
    overflow: hidden;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.source-detail-stats dd {
    margin: 2px 0 0;
    color: var(--text);
    font: 700 var(--type-ui)/1.2 var(--font-mono);
}
.source-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border-top: 0;
    padding-top: 0;
}
.source-card__switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
    white-space: nowrap;
}
.source-card__switch .toggle { flex: none; }
.source-card__actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}
.source-card__action {
    width: 36px;
    min-height: 36px;
    padding: 0;
    font-size: var(--type-xs);
}
.source-card__checking-state {
    grid-column: 2 / -1;
    justify-self: end;
    width: auto;
    border: 0;
    padding: 0;
    background: transparent;
}

/* Подробности источника не раскрывают строку грида: соседние карточки
   сохраняют высоту, а редкие параметры открываются в спокойном диалоге. */
.source-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 20px;
    background: color-mix(in srgb, var(--bg-0) 78%, transparent);
    backdrop-filter: blur(5px);
}
.source-detail-dialog {
    display: flex;
    width: min(720px, 100%);
    max-height: min(820px, calc(100vh - 40px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
}
.source-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border-bottom: 1px solid var(--border);
    padding: 15px 16px;
    background: var(--bg-1);
}
.source-detail-head .source-type-icon {
    width: 28px;
    height: 28px;
    margin: 1px 0 0;
}
.source-detail-kicker {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
}
.source-detail-identity h2 {
    margin: 2px 0 3px;
    color: var(--text);
    font-size: var(--type-lg);
    line-height: 1.25;
    letter-spacing: -.02em;
}
.source-detail-body {
    display: grid;
    gap: 12px;
    overflow-y: auto;
    padding: 14px 16px 16px;
    overscroll-behavior: contain;
}
.source-detail-state-row {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.4;
}
.source-detail-error { margin: 0; }
.source-detail-section {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--border-soft);
    padding: 12px 0 0;
    background: transparent;
}
.source-detail-section:first-child { border-top: 0; padding-top: 0; }
.source-detail-section h3 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-ui);
    font-weight: 700;
}
.source-detail-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.source-detail-stats > div { background: var(--bg-2); }
.source-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.source-detail-copy {
    display: grid;
    gap: 4px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.5;
}
.source-detail-copy b { color: var(--text); font-weight: 600; }
.source-detail-muted { color: var(--text-mute); }
.source-detail-tech {
    border-top: 1px solid var(--border-soft);
    padding-top: 3px;
}
.source-detail-tech-grid {
    display: grid;
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
    gap: 5px 12px;
    padding-top: 9px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.source-detail-tech-grid b {
    overflow-wrap: anywhere;
    color: var(--text-dim);
    font-weight: 500;
}
.source-detail-tech-message {
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.45;
}
.source-detail-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    border-top: 1px solid var(--border);
    padding: 11px 16px;
    background: var(--bg-1);
}
.source-detail-footer__spacer { flex: 1; }

/* Добавление и редактирование используют один набор полей и одну модальную
   геометрию: это не даёт двум формам снова разойтись после расширения паспорта. */
.source-form-dialog { width: min(780px, 100%); }
.source-form-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9px;
    color: var(--accent);
    background: var(--accent-soft);
}
.source-form {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}
.source-form-body {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    padding: 12px 14px 14px;
    overscroll-behavior: contain;
}
.source-form-section {
    display: grid;
    gap: 10px;
    margin: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 11px 12px;
    background: var(--bg-2);
}
.source-form-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.source-form-section__head h3,
.source-form-disclosure > summary > span {
    margin: 0;
    color: var(--text);
    font-size: var(--type-ui);
    font-weight: 700;
}
.source-form-section__head > span,
.source-form-disclosure > summary small {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
}
.source-form-disclosure > summary {
    display: flex;
    align-items: baseline;
    gap: 7px;
    cursor: pointer;
    list-style: none;
}
.source-form-disclosure > summary::-webkit-details-marker { display: none; }
.source-form-disclosure > summary::marker { content: ""; }
.source-form-disclosure > summary::after {
    content: "›";
    margin-left: auto;
    color: var(--text-mute);
    font-size: var(--type-lg);
    line-height: 1;
    transition: transform .12s;
}
.source-form-disclosure[open] > summary::after { transform: rotate(90deg); }
.source-form-section__content {
    display: grid;
    gap: 11px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}
.source-form-static {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    gap: 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0 13px;
    color: var(--text-dim);
    background: var(--bg-1);
    font-size: var(--type-body);
}
.source-form-static span { color: var(--text-mute); font-size: var(--type-xs); }
.source-form-footer { flex: none; }

/* Редкие редакционные и технические фильтры раскрываются по запросу. */
.source-filter-panel {
    margin: 0 0 8px;
    border: 0;
    background: transparent;
}
.source-filter-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-mute);
    font-size: var(--type-sm);
    list-style: none;
}
.source-filter-summary::-webkit-details-marker { display: none; }
.source-filter-summary::marker { content: ""; }
.source-filter-summary::after {
    content: "›";
    font-size: var(--type-md);
    line-height: 1;
    transition: transform .12s;
}
.source-filter-panel[open] > .source-filter-summary::after { transform: rotate(90deg); }
.source-filter-current { color: var(--text-dim); font-size: var(--type-xs); }
.source-filter-body {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    padding: 10px 0 2px;
}
.source-filter-row { display: grid; gap: 5px; }
.source-filter-label {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
}
.source-filter-panel .source-type-chips { margin: 0; }
.sources-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 3px 0 7px;
}
.sources-result-row .sources-count { margin: 0; }

@media (max-width: 720px) {
    .sources-page-head { align-items: stretch; flex-direction: column; gap: 9px; }
    .sources-page-actions { flex-wrap: wrap; }
    .sources-page-actions .btn:not(.btn-icon) { flex: 1 1 auto; }
    .sources-settings-body { grid-template-columns: minmax(0, 1fr); }
    .sources-settings-view .btn { width: 100%; }
    .sources-card-grid { grid-template-columns: minmax(0, 1fr); }
    .source-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 9px;
        padding: 11px 2px;
    }
    .source-card__head { grid-column: 1 / -1; }
    .source-card__summary { padding-left: 50px; }
    .source-card__checking-state { grid-column: 1 / -1; justify-self: start; margin-left: 50px; }
    .source-card__footer { align-items: center; }
    .source-card__switch > span { display: none; }
    .source-filter-panel { margin-inline: -2px; padding: 9px; }
    .source-filter-panel .source-type-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .source-filter-panel .source-type-chips::-webkit-scrollbar { display: none; }
    .source-type-chip { flex: none; }
    .source-detail-overlay { align-items: end; padding: 0; }
    .source-detail-dialog {
        width: 100%;
        max-height: calc(100dvh - 18px);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .source-detail-head { padding: 13px 12px; }
    .source-detail-body { padding: 12px; }
    .source-detail-state-row { align-items: flex-start; flex-direction: column; gap: 6px; }
    .source-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .source-detail-footer { padding: 10px 12px; }
    .source-form-body { padding: 10px; }
    .source-form-section { padding: 10px; }
    .source-form-section__head { align-items: flex-start; flex-direction: column; gap: 2px; }
    .source-form-disclosure > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 2px 8px;
    }
    .source-form-disclosure > summary small { grid-column: 1; }
    .source-form-disclosure > summary::after { grid-column: 2; grid-row: 1 / 3; }
    .source-form-footer .source-detail-footer__spacer { display: none; }
    .source-form-footer .btn { flex: 1 1 auto; }
}

/* Пользователи: плоский список для обзора, редкие настройки — в деталях. */
.admin-users-page {
    width: min(1080px, 100%);
    margin-inline: auto;
}
.admin-users-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.admin-users-head .page-title { margin: 0; }
.admin-users-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 5px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.admin-users-head > .btn { min-height: 40px; }
.admin-users-head > .btn svg { width: 18px; height: 18px; }
.admin-users-list {
    border-top: 1px solid var(--border);
}
.admin-user-item { border-bottom: 1px solid var(--border); }
.admin-user-row {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 120px 112px 128px 40px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 74px;
    border: 0;
    padding: 12px 2px;
    color: var(--text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease;
}
.admin-user-row:hover,
.admin-user-row:focus-visible {
    outline: none;
    background: var(--bg-2);
}
.admin-user-row__identity {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.admin-user-row__identity strong {
    overflow: hidden;
    color: var(--text);
    font-size: var(--type-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-row__identity small,
.admin-user-row__activity {
    overflow: hidden;
    color: var(--text-mute);
    font-size: var(--type-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-row__role {
    color: var(--text-dim);
    font-size: var(--type-sm);
}
.admin-user-row__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.admin-user-row__state i {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--text-mute);
}
.admin-user-row__state.is-online { color: var(--success); }
.admin-user-row__state.is-online i { background: var(--success); }
.admin-user-row__state.is-disabled { color: var(--text-mute); }
.admin-user-row__state.is-disabled i { background: var(--danger); }
.admin-user-row__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-mute);
}
.admin-user-row:hover .admin-user-row__more { color: var(--text); background: var(--bg-1); }
.admin-users-empty { padding: 38px 0; }

.admin-user-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.admin-user-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .54);
}
.admin-user-dialog {
    position: relative;
    display: flex;
    width: min(760px, 100%);
    max-height: min(760px, calc(100dvh - 48px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
}
.admin-user-dialog--create { width: min(620px, 100%); }
.admin-user-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: none;
    border-bottom: 1px solid var(--border);
    padding: 16px 18px;
}
.admin-user-dialog__head h2 {
    margin: 1px 0 0;
    color: var(--text);
    font-size: var(--type-lg);
    line-height: 1.25;
}
.admin-user-dialog__head p {
    margin: 4px 0 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.admin-user-dialog__eyebrow {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
}
.admin-user-dialog .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: var(--text-mute);
    background: transparent;
    cursor: pointer;
}
.admin-user-dialog .icon-button:hover { color: var(--text); background: var(--bg-2); }
.admin-user-dialog__body {
    display: grid;
    gap: 20px;
    overflow-y: auto;
    min-height: 0;
    padding: 18px;
    overscroll-behavior: contain;
}
.admin-user-section {
    display: grid;
    gap: 11px;
}
.admin-user-section + .admin-user-section {
    border-top: 1px solid var(--border-soft);
    padding-top: 18px;
}
.admin-user-section h3,
.admin-user-section__title h3 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-ui);
    font-weight: 700;
}
.admin-user-section__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.admin-user-section__title > span,
.admin-user-section__note,
.admin-user-section__empty {
    margin: 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.admin-user-access-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr);
    gap: 12px;
}
.admin-user-role-form,
.admin-user-status-form {
    display: flex;
    align-items: end;
    gap: 8px;
    min-width: 0;
}
.admin-user-role-form .field { min-width: 0; flex: 1; }
.admin-user-status-form {
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid var(--border-soft);
    padding-left: 12px;
}
.admin-user-status-form > span { display: grid; gap: 2px; }
.admin-user-status-form small { color: var(--text-mute); font-size: var(--type-xs); }
.admin-user-status-form strong { color: var(--text); font-size: var(--type-sm); }
.admin-user-sessions { border-top: 1px solid var(--border-soft); }
.admin-user-session {
    border-bottom: 1px solid var(--border-soft);
    padding: 11px 0;
}
.admin-user-session__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.admin-user-session__main > span { display: grid; gap: 3px; min-width: 0; }
.admin-user-session__main strong { color: var(--text); font-size: var(--type-sm); }
.admin-user-session__main small { color: var(--text-mute); font-size: var(--type-xs); }
.admin-user-session__tech { margin-top: 7px; }
.admin-user-session__tech > summary,
.admin-user-security > summary,
.admin-activity-row > details > summary {
    width: max-content;
    cursor: pointer;
    color: var(--text-mute);
    font-size: var(--type-xs);
    list-style: none;
}
.admin-user-session__tech > summary::-webkit-details-marker,
.admin-user-security > summary::-webkit-details-marker,
.admin-activity-row > details > summary::-webkit-details-marker { display: none; }
.admin-user-session__tech > summary::after,
.admin-user-security > summary::after,
.admin-activity-row > details > summary::after { content: " ›"; }
.admin-user-session__tech[open] > summary::after,
.admin-user-security[open] > summary::after,
.admin-activity-row > details[open] > summary::after { content: " ↓"; }
.admin-user-session__tech dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 18px;
    margin: 8px 0 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.admin-user-session__tech dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.admin-user-session__tech dt { color: var(--text-mute); }
.admin-user-session__tech dd { margin: 0; color: var(--text-dim); overflow-wrap: anywhere; }
.admin-user-revoke-all { margin-top: 1px; }
.admin-user-security {
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
}
.admin-user-security > summary { color: var(--text-dim); font-size: var(--type-sm); }
.admin-user-security > form {
    display: flex;
    align-items: end;
    gap: 8px;
    max-width: 470px;
    margin-top: 11px;
}
.admin-user-security .field { min-width: 0; flex: 1; }
.admin-user-dialog__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: none;
    border-top: 1px solid var(--border);
    padding: 11px 18px;
}
.admin-user-dialog__foot > a { color: var(--text-dim); font-size: var(--type-sm); }
.admin-user-dialog__foot--end { justify-content: flex-end; }
.admin-user-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-user-create-grid .async-state { grid-column: 1 / -1; }

.admin-activity-journal {
    margin-top: 24px;
    border-top: 1px solid var(--border);
}
.admin-activity-journal > summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 2px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.admin-activity-journal > summary::-webkit-details-marker { display: none; }
.admin-activity-journal > summary::after {
    content: "›";
    margin-left: auto;
    color: var(--text-mute);
    font-size: var(--type-lg);
    line-height: 1;
}
.admin-activity-journal[open] > summary::after { transform: rotate(90deg); }
.admin-activity-journal > summary small { color: var(--text-mute); font-size: var(--type-xs); font-weight: 400; }
.admin-activity-journal__body { padding: 2px 2px 18px; }
.admin-activity-filters {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 110px 120px minmax(150px, 1fr) auto;
    align-items: end;
    gap: 8px;
    margin-bottom: 14px;
}
.admin-activity-filters__actions { display: flex; gap: 5px; }
.admin-activity-list { border-top: 1px solid var(--border-soft); }
.admin-activity-row {
    display: grid;
    grid-template-columns: 136px minmax(140px, .75fr) minmax(220px, 1.25fr) 90px;
    align-items: start;
    gap: 12px;
    border-bottom: 1px solid var(--border-soft);
    padding: 10px 0;
    font-size: var(--type-sm);
}
.admin-activity-row > time { color: var(--text-mute); font-size: var(--type-xs); white-space: nowrap; }
.admin-activity-row__actor,
.admin-activity-row__action { display: grid; gap: 2px; min-width: 0; }
.admin-activity-row__actor strong,
.admin-activity-row__action strong { color: var(--text); font-size: var(--type-sm); }
.admin-activity-row__actor small,
.admin-activity-row__action small { overflow-wrap: anywhere; color: var(--text-mute); font-size: var(--type-xs); }
.admin-activity-row > details { min-width: 0; }
.admin-activity-row > details > code,
.admin-activity-row > details > span {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.admin-activity-empty { padding: 28px 0; }

@media (max-width: 760px) {
    .admin-users-head { align-items: center; margin-bottom: 16px; }
    .admin-users-head > .btn { width: 40px; min-width: 40px; padding-inline: 0; }
    .admin-users-head > .btn span { display: none; }
    .admin-user-row {
        position: relative;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 12px;
        min-height: 86px;
        padding: 12px 46px 12px 2px;
    }
    .admin-user-row__identity { grid-column: 1 / -1; }
    .admin-user-row__role { grid-column: 1; }
    .admin-user-row__state { grid-column: 2; justify-self: end; }
    .admin-user-row__activity { grid-column: 1 / -1; }
    .admin-user-row__more { position: absolute; top: 24px; right: 0; }
    .admin-user-overlay { align-items: flex-end; padding: 0; }
    .admin-user-dialog {
        width: 100%;
        max-height: calc(100dvh - 18px);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .admin-user-dialog__head { padding: 14px; }
    .admin-user-dialog__body { gap: 18px; padding: 14px; }
    .admin-user-dialog__foot { padding: 10px 14px; }
    .admin-user-access-grid { grid-template-columns: minmax(0, 1fr); }
    .admin-user-status-form { border-left: 0; border-top: 1px solid var(--border-soft); padding: 10px 0 0; }
    .admin-user-session__main { align-items: flex-start; flex-direction: column; }
    .admin-user-session__tech dl { grid-template-columns: minmax(0, 1fr); }
    .admin-user-security > form { align-items: stretch; flex-direction: column; }
    .admin-user-create-grid { grid-template-columns: minmax(0, 1fr); }
    .admin-activity-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-activity-filters__actions { grid-column: 1 / -1; }
    .admin-activity-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
    .admin-activity-row > time { grid-column: 1; }
    .admin-activity-row__actor { grid-column: 1; }
    .admin-activity-row__action { grid-column: 1 / -1; }
    .admin-activity-row > details { grid-column: 2; grid-row: 1 / 3; justify-self: end; }
}

/* Feed cluster card */
/* Grid-layout: левая колонка узкая, проходит через обе строки (head + toolbar).
   Items-badge внутри cluster-left получает margin-top:auto и встаёт ровно
   на уровень toolbar справа. */
/* Лента: один спокойный рабочий ряд. Поиск и сортировка остаются на виду,
   редкие ограничения раскрываются одной кнопкой «Фильтры». */
.feed-actions-row { margin: 0 0 18px; }
.feed-control-panel {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.feed-control-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 2px 0 10px;
}
.feed-control-toolbar > .btn { flex: 0 0 auto; white-space: nowrap; }
.feed-control-toolbar .feed-search { flex: 1 1 280px; }
.feed-control-toolbar .feed-sort { flex: 0 1 250px; }
.feed-control-toolbar .feed-density--layout { margin-left: auto; }
.feed-control-toolbar .btn-icon,
.feed-add-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
}
.feed-control-toolbar .btn-icon svg,
.feed-add-button svg {
    width: 18px;
    height: 18px;
}
.feed-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    min-height: 36px;
    padding-inline: 12px;
    color: var(--text-dim);
}
.feed-filter-toggle.is-active {
    color: var(--text);
    border-color: transparent;
    background: var(--bg-2);
}
.feed-filter-toggle.has-active-filters { color: var(--text); }
.feed-filter-count {
    min-width: 1ch;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.feed-control-panel .feed-filter-drawer {
    width: 100%;
    margin: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.feed-filter-native-summary { display: none; }
.feed-control-panel .feed-settings-body {
    gap: 8px;
    padding: 9px 10px 10px;
    border-top: 0;
}
.feed-filter-main-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(210px, .9fr) minmax(150px, .65fr) minmax(240px, 1.2fr);
    gap: 9px;
    align-items: end;
}
.feed-filter-main-grid > .feed-settings-row { display: contents; }
.feed-filter-main-grid .feed-settings-cell,
.feed-filter-geo-grid .feed-settings-cell {
    min-width: 0 !important;
}
.feed-filter-geo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    align-items: start;
}
.feed-filter-geo-grid > div { min-width: 0; }
.feed-filter-country { order: 1; }
.feed-filter-region { order: 2; }
.feed-filter-org { order: 3; }
.feed-filter-geo-grid .feed-settings-row { display: block; }
.feed-filter-drawer .dropdown-panel {
    max-height: min(360px, 52vh);
    overflow-y: auto;
}
.feed-period-filter { align-self: stretch; }
.feed-period-filter .feed-age,
.feed-period-filter .feed-age-select { width: 100%; }
.feed-period-custom {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}
.feed-period-custom .input {
    min-width: 0;
    padding-inline: 7px;
    font-size: var(--type-xs);
}
@media (max-width: 900px) {
    .feed-filter-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .feed-filter-main-grid > .feed-settings-row:first-of-type > .feed-settings-cell {
        grid-column: 1 / -1;
    }
    .feed-filter-geo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feed-filter-org { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .feed-control-toolbar {
        gap: 7px;
        padding: 2px 0 10px;
    }
    .feed-control-toolbar .feed-search {
        order: -3;
        flex: 1 1 100%;
    }
    .feed-control-toolbar .feed-category-picker {
        order: -2;
        flex: 1 1 210px;
    }
    .feed-control-toolbar .feed-sort {
        order: -2;
        flex: 1 1 220px;
    }
    .feed-control-toolbar .incident-feed-view {
        order: -1;
        flex: 1 1 100%;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .feed-control-toolbar .incident-feed-view::-webkit-scrollbar { display: none; }
    .feed-control-toolbar .incident-feed-view .feed-density-btn { flex: 0 0 auto; }
    .feed-control-toolbar .feed-density--layout { margin-left: auto; }
    .feed-filter-toggle { order: -2; }
    .feed-control-panel .feed-settings-body { padding: 8px; }
    .feed-filter-main-grid { gap: 8px; }
}
@media (max-width: 340px) {
    .feed-filter-main-grid,
    .feed-filter-geo-grid { grid-template-columns: minmax(0, 1fr); }
    .feed-filter-main-grid > .feed-settings-row:first-of-type > .feed-settings-cell,
    .feed-filter-org { grid-column: auto; }
}

/* «Обстановка»: текстовый вариант уже существующего .feed-density.
   Базовые размеры/цвета намеренно не дублируются — контрол должен выглядеть
   ровно как соседний переключатель «Список / Плитка / Строки». */
.incident-feed-view { flex-shrink: 0; }
.incident-feed-view .feed-density-btn { padding-inline: 9px; font-size: var(--type-sm); }
.cluster-occurrence-chip {
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
}
.cluster-occurrence-related {
    border-style: dashed;
    color: color-mix(in srgb, var(--accent) 66%, var(--text));
    background: color-mix(in srgb, var(--accent-soft) 38%, transparent);
}

/* DYN-3: короткая read-only динамика на карточке и полный доказательный блок
   в Details. Только canonical exact-only history; никаких shadow/canary данных. */
.incident-outcome-filter { flex-shrink: 0; }
.incident-outcome-filter .feed-density-btn { padding-inline: 8px; font-size: var(--type-sm); }
.cluster-outcome-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-top: 6px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
    color: var(--text-dim);
    font-size: var(--type-xs);
    line-height: 1.35;
}
.cluster-outcome-summary__line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.cluster-outcome-summary__label { color: var(--text-mute); font-weight: 600; }
.cluster-outcome-summary__value { color: var(--text); font-weight: 600; }
.cluster-outcome-summary__change { color: color-mix(in srgb, var(--warning) 72%, var(--text)); }
.cluster-outcome-summary__more,
.cluster-outcome-summary__conflict { color: var(--warning); font-weight: 600; }
.feed-rows .cluster-outcome-summary { display: none; }

.incident-dynamics-lazy {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-mute);
    font-size: var(--type-sm);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.incident-dynamics-panel {
    padding: 0;
    overflow: hidden;
}
.incident-dynamics-panel__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 6px 10px;
    cursor: pointer;
    list-style: none;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.incident-dynamics-panel__summary::-webkit-details-marker { display: none; }
.incident-dynamics-panel__heading { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.incident-dynamics-panel__caret {
    color: var(--text-mute);
    font-size: var(--type-lg);
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .15s ease;
}
.incident-dynamics-panel[open] > .incident-dynamics-panel__summary .incident-dynamics-panel__caret { transform: rotate(90deg); }
.incident-dynamics-panel__title { color: var(--text); font-size: var(--type-sm); font-weight: 600; white-space: nowrap; }
.incident-dynamics-panel__counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.incident-dynamics-panel__counts .chip { min-height: 18px; padding: 1px 5px; font-size: var(--type-2xs); }
.incident-dynamics-panel__hint {
    margin: 0;
    padding: 5px 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.35;
}
.incident-dynamics-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 8px 10px;
}
.incident-dynamics-section {
    min-width: 0;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.incident-dynamics-section--current { border-color: color-mix(in srgb, var(--success) 24%, var(--border)); }
.incident-dynamics-section--changes { border-color: color-mix(in srgb, var(--warning) 24%, var(--border)); }
.incident-dynamics-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 28px;
    border-bottom: 1px solid var(--border);
}
.incident-dynamics-section__head h3 {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--type-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.incident-dynamics-section__head > span {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    text-align: center;
    background: color-mix(in srgb, var(--bg) 58%, transparent);
}
.incident-dynamics-list { display: grid; }
.incident-dynamics-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 8px;
    min-height: 30px;
    padding: 5px 0;
    color: var(--text-dim);
    font-size: var(--type-xs);
}
.incident-dynamics-row + .incident-dynamics-row { border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.incident-dynamics-row--competing { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--warning) 70%, transparent); padding-left: 6px; }
.incident-dynamics-row--conflict { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--danger) 74%, transparent); padding-left: 6px; }
.incident-dynamics-row__main,
.incident-dynamics-item__head,
.incident-dynamics-change { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.incident-dynamics-row__main strong,
.incident-dynamics-item__head strong,
.incident-dynamics-change strong { color: var(--text); }
.incident-dynamics-row__meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    white-space: nowrap;
}
.incident-dynamics-row__meta span:first-child { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.incident-dynamics-row__time { color: var(--text-mute); font-size: var(--type-2xs); white-space: nowrap; }
.incident-dynamics-change__arrow { color: var(--text-mute); }
.incident-dynamics-tag {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 0 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.2;
    white-space: nowrap;
}
.incident-dynamics-tag--warn { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); color: var(--warning); }
.incident-dynamics-tag--danger { border-color: color-mix(in srgb, var(--danger) 34%, var(--border)); color: var(--danger); }
.incident-dynamics-empty { margin: 0; padding: 8px 0; color: var(--text-mute); font-size: var(--type-xs); line-height: 1.35; }
.incident-dynamics-panel__drilldown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0 10px 8px;
}
.incident-dynamics-subsection {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.incident-dynamics-subsection > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 28px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: var(--type-xs);
    font-weight: 600;
}
.incident-dynamics-subsection__count { color: var(--text-mute); font-size: var(--type-2xs); font-weight: 500; }
.incident-dynamics-timeline { display: grid; gap: 0; padding: 0 8px 6px; border-top: 1px solid var(--border); }
.incident-dynamics-timeline__row {
    display: grid;
    grid-template-columns: 8px minmax(100px, auto) auto 1fr;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
}
.incident-dynamics-timeline__row + .incident-dynamics-timeline__row { border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent); }
.incident-dynamics-timeline__row time { justify-self: end; color: var(--text-mute); white-space: nowrap; }
.incident-dynamics-timeline__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.incident-dynamics-timeline__row--current .incident-dynamics-timeline__dot { background: var(--success); }
.incident-dynamics-timeline__row--contradicted .incident-dynamics-timeline__dot { background: var(--danger); }
.incident-dynamics-evidence { display: grid; gap: 5px; padding: 6px 8px 8px; border-top: 1px solid var(--border); }
.incident-dynamics-evidence__item { padding: 6px 7px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--bg) 42%, transparent); }
.incident-dynamics-evidence__item blockquote { margin: 4px 0 0; padding-left: 6px; border-left: 2px solid var(--border); color: var(--text-dim); font-size: var(--type-xs); line-height: 1.4; }
.incident-dynamics-item__meta { margin-top: 3px; color: var(--text-mute); font-size: var(--type-2xs); }
.incident-dynamics-evidence a { color: var(--accent); font-size: var(--type-2xs); }
.incident-dynamics-source-title { margin-top: 3px; color: var(--text-dim); font-size: var(--type-xs); }
.incident-dynamics-panel__more { padding: 0 10px 8px; text-align: center; }
.incident-dynamics-panel__more .btn { min-height: 24px; padding-block: 2px; }
@media (max-width: 720px) {
    .feed-control-toolbar .incident-outcome-filter { flex: 0 0 auto; }
    .incident-dynamics-panel__summary { align-items: flex-start; }
    .incident-dynamics-panel__grid,
    .incident-dynamics-panel__drilldown { grid-template-columns: minmax(0, 1fr); }
    .incident-dynamics-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .incident-dynamics-row__meta { justify-content: flex-start; }
    .incident-dynamics-timeline__row { grid-template-columns: 8px 1fr auto; }
    .incident-dynamics-timeline__row time { grid-column: 2 / -1; justify-self: start; }
}
/* Поле поиска Ленты — компактный инпут с ведущей иконкой-лупой. Обёртка
   держит flex-размер и позиционирует иконку; сам инпут — во всю ширину
   обёртки с левым отступом под иконку. Высота/шрифт остаются компактными,
   чтобы поиск не спорил с кнопкой «Обновить». */
.feed-search {
    position: relative;
    display: inline-flex; align-items: center;
    flex: 0 1 240px; min-width: 160px;
}
.feed-search > svg {
    position: absolute; left: 10px;
    color: var(--text-mute); pointer-events: none;
}
.feed-search > .input {
    width: 100%;
    height: 36px;
    padding: 0 11px 0 36px;
    font-size: var(--type-ui);
    border-radius: 6px;
}
.feed-sort {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    min-width: 220px;
}
.feed-sort > .select {
    min-width: 0;
    height: 36px;
    padding: 6px 28px 6px 10px;
    border-radius: 6px 0 0 6px;
    font-size: var(--type-ui);
}
.feed-sort > .sort-dir-toggle {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin-left: -1px;
    padding: 0;
    border-radius: 0 6px 6px 0;
}
.feed-sort > .sort-dir-toggle .sort-dir-icon {
    display: inline-flex;
    transition: transform .15s ease;
}
.feed-sort > .sort-dir-toggle[data-sort-dir="asc"] .sort-dir-icon { transform: rotate(180deg); }
/* На узком экране поиск занимает всю ширину отдельной строкой, а вид
   карточек / «Обновить» / «…» переносятся ниже — иначе они наезжали. */
@media (max-width: 640px) {
    .feed-search { flex: 1 1 100%; }
}

/* Окно свежести «за последние N» — иконка часов + компактный select, по
   образцу .feed-search (та же высота 30px, иконка слева по центру). */
.feed-age {
    position: relative;
    display: inline-flex; align-items: center;
    flex: 0 0 auto;
}
.feed-age > svg {
    position: absolute; left: 10px;
    top: 50%; transform: translateY(-50%);   /* вертикально по центру поля */
    color: var(--text-mute); pointer-events: none;
}
.feed-age > .feed-age-select {
    width: auto;                        /* по контенту, а не 100% из базы */
    height: 32px;
    padding: 0 30px 0 32px;             /* слева под иконку, справа под chevron */
    font-size: var(--type-sm);
    border-radius: 6px;
    background-position: right 11px center;   /* chevron как у поиска */
}

.feed-settings {
    margin-bottom: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.feed-settings[open] { background: var(--bg-1); }
.feed-settings-summary {
    cursor: pointer;
    padding: 8px 12px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--type-ui);
    color: var(--text);
    user-select: none;
}
.feed-settings-summary::-webkit-details-marker { display: none; }
.feed-settings-summary::before {
    content: "▸";
    color: var(--text-mute);
    margin-right: 2px;
    font-size: var(--type-2xs);
    transition: transform 0.12s;
}
.feed-settings[open] .feed-settings-summary::before {
    transform: rotate(90deg);
    display: inline-block;
}
.feed-settings-summary-info {
    font-size: var(--type-sm);
    color: var(--text-mute);
    margin-left: auto;
}
.feed-settings-body {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: 10px;
}
.feed-settings-row {
    display: flex; flex-wrap: wrap; gap: 10px 14px;
    align-items: flex-end;
}
.feed-settings-row .input,
.feed-settings-row .select,
.feed-settings-row .dropdown-trigger,
.feed-settings-row .sort-dir-toggle {
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    font-size: var(--type-ui);
}
.feed-settings-row .input { padding: 5px 10px; }
.feed-settings-row .select { padding-top: 5px; padding-bottom: 5px; }
.feed-settings-row .btn { min-height: 32px; }
.feed-settings-cell {
    display: flex; flex-direction: column; gap: 4px;
}
.feed-settings-cell .label-mono { margin: 0; }

/* Связка [select сортировки] + [кнопка ↓/↑ направления]. Кнопка
   прижата вплотную к select, шире на 32px, моноширинная стрелка. */
.sort-with-dir {
    display: flex; align-items: stretch; gap: 4px;
}
.sort-with-dir .select { flex: 1; min-width: 140px; }
.sort-dir-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; padding: 0 8px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.sort-dir-toggle:hover {
    background: var(--bg-2);
    border-color: var(--border-soft);
}
.sort-dir-toggle .sort-dir-icon {
    font-family: var(--font-mono);
    font-size: var(--type-lg); line-height: 1;
    color: var(--text);
}

/* Автосбор остаётся одной служебной строкой; параметры раскрываются отдельно. */
.autocollect-card {
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 2px;
    margin-bottom: 10px;
}
.autocollect-row {
    display: flex; align-items: center; gap: 10px;
}
.autocollect-title {
    flex: 1; min-width: 0;
}
.autocollect-name {
    font-size: var(--type-sm); font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.autocollect-status-dim {
    font-size: var(--type-sm); font-weight: 400; color: var(--text-mute);
}
.autocollect-sub {
    font-size: var(--type-sm); color: var(--text-mute);
    padding-top: 7px;
}
.autocollect-sub b { color: var(--text); font-weight: 600; }
.autocollect-details { margin: 4px 0 0 42px; }
.autocollect-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--text-mute);
    font-size: var(--type-xs);
    list-style: none;
}
.autocollect-details > summary::-webkit-details-marker { display: none; }
.autocollect-details > summary::marker { content: ""; }
.autocollect-details > summary::after { content: "›"; transition: transform .12s; }
.autocollect-details[open] > summary::after { transform: rotate(90deg); }
.autocollect-warn {
    margin-top: 6px;
    font-size: var(--type-sm);
    color: var(--danger);
}
.autocollect-warn--watchdog { color: var(--warn); }

/* Компактные inline-метрики на Рабочем столе — заменили большие
   квадратные карточки с цифрами. Подпись + значение в одну строку,
   цвет только если счётчик ненулевой. */
.metric-strip,
.dashboard-metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    padding: 6px 2px 14px;
    align-items: baseline;
}
.metric-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--type-body);
}
.metric-inline .metric-label {
    color: var(--text-mute);
    text-transform: uppercase;
    font-size: var(--type-xs);
    letter-spacing: 0.05em;
}
.metric-inline .metric-value {
    color: var(--text-mute);
    font-weight: 700;
    font-size: var(--type-lg);
    font-variant-numeric: tabular-nums;
}
.metric-inline .metric-value.accent-warn { color: var(--warn); }
.metric-inline .metric-value.accent-ok   { color: var(--success); }
.metric-inline .metric-value.accent-bad  { color: var(--danger); }
/* Кликабельная метрика = быстрый фильтр списка источников. Курсор-указатель,
   мягкая подсветка при наведении/фокусе — сигнал «это кнопка». */
.metric-inline.metric-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -2px;
    transition: background 0.12s ease;
}
.metric-inline.metric-clickable:hover,
.metric-inline.metric-clickable:focus-visible {
    background: var(--bg-2);
    outline: none;
}
.metric-inline.metric-clickable:hover .metric-label {
    color: var(--text);
}

/* Нижний плавающий бар выбора — общий для Ленты (partials/feed_selection_bar
   держит свою локальную копию этих правил) и Источников (#sources-bulk-bar).
   Вынесен в app.css, чтобы страница «Источники» получила ту же панель
   действий, что и «Лента», без дублирования разметки стилей. */
.sel-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 10px;
    min-width: 280px;
    max-width: calc(100vw - 24px);
    padding: 8px 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.sel-bar__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-body);
    color: var(--text);
    white-space: nowrap;
}
.sel-bar__count b { color: var(--accent); }

/* Общий каркас компактных модальных окон действий.
   Используется объединением карточек и выбором подборки; содержимое у них
   разное, а геометрия, прокрутка и шапка должны оставаться одинаковыми. */
.sel-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
}

/* Leaflet ships with its own Helvetica/Tahoma stacks. Maps should use the
   same UI typography as the rest of the application. */
.leaflet-container,
.leaflet-control,
.leaflet-popup-content,
.leaflet-tooltip {
    font-family: var(--font-sans);
}
.sel-modal-backdrop--high { z-index: 90; }
.sel-modal {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    overflow: hidden;
}
.sel-modal--sm { max-width: 500px; }
.sel-modal > form {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sel-modal__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.sel-modal__title {
    flex: 1;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
}
.sel-modal__head .btn { margin-left: auto; }
.sel-modal__body {
    min-height: 0;
    padding: 12px 14px;
    overflow-y: auto;
}
.sel-modal__body--stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sel-modal__hint {
    margin-bottom: 6px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.sel-modal__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--border-soft);
}
.sel-modal__foot form {
    display: inline-flex;
    margin: 0;
}
.sel-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 9px 11px;
    border: 1px solid var(--warn-border);
    border-radius: 8px;
    background: var(--warn-soft);
    color: var(--text);
    font-size: var(--type-sm);
    line-height: 1.45;
}
.sel-warn b { color: var(--warn); }
.sel-warn--event {
    border-color: var(--danger-border);
    background: var(--danger-soft);
}
.sel-warn--event b { color: var(--danger); }
.sel-target-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sel-target {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.sel-target:hover { border-color: var(--text-mute); }
.sel-target--on {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.sel-target__score {
    flex-shrink: 0;
    min-width: 30px;
    color: var(--text-dim);
    font-family: var(--font-mono, monospace);
    font-size: var(--type-md);
    font-weight: 700;
    text-align: center;
}
.sel-target__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--type-ui);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sel-target__id {
    flex-shrink: 0;
    color: var(--text-mute);
    font-family: var(--font-mono, monospace);
    font-size: var(--type-xs);
}
.sel-sources {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sel-source {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 2px 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
}
.sel-source__id {
    flex-shrink: 0;
    color: var(--text-mute);
    font-family: var(--font-mono, monospace);
}
.sel-source__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sel-source--empty { color: var(--text-mute); font-style: italic; }
.sel-reextract {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 11px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: var(--type-ui);
}
.sel-reextract input { margin-top: 2px; }
.sel-reextract__note {
    display: block;
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}

/* Единое рабочее пространство отчётов: подборки и тематические сводки.
   Страницы добавляют только свои предметные модификаторы. */
.report-workspace { padding:0; overflow:hidden; border-color:var(--border); background:var(--bg-1); }
.report-workspace[open] { border-color:color-mix(in srgb,var(--accent) 18%,var(--border)); }
.report-workspace__summary { padding:0; list-style:none; cursor:pointer; }
.report-workspace__summary::-webkit-details-marker { display:none; }
.report-workspace__summary::before { display:none!important; }
.report-workspace__head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px 14px; background:var(--bg-1); border-bottom:1px solid var(--border-soft); }
.report-workspace__icon { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--text-mute); background:var(--bg-soft); border:1px solid var(--border-soft); }
.report-workspace__title { display:block; font-size:var(--type-md); font-weight:600; color:var(--text); }
.report-workspace__caption { display:block; font-size:var(--type-xs); color:var(--text-mute); margin-top:2px; }
.report-workspace__meta { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.report-workspace__meta span { padding:2px 7px; border:1px solid var(--border-soft); border-radius:999px; color:var(--text-mute); background:var(--bg-soft); font-size:var(--type-xs); font-weight:500; }
.report-workspace__body { padding:12px; display:flex; flex-direction:column; gap:10px; }
.report-step { padding:11px 12px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--bg-2); }
.report-step--setup { background:var(--bg-2); }
.report-step__head, .report-preview-empty { display:flex; align-items:center; gap:10px; }
.report-step__head b, .report-preview-empty b { display:block; font-size:var(--type-ui); color:var(--text); }
.report-step__head span:not(.report-step__num), .report-preview-empty div span { display:block; font-size:var(--type-xs); color:var(--text-mute); margin-top:1px; }
.report-section-title { padding:0 2px; }
.report-step__num { flex:0 0 23px; width:23px; height:23px; border-radius:50%; display:grid!important; place-items:center; background:var(--bg-soft); border:1px solid var(--border-soft); color:var(--text-mute)!important; font:600 var(--type-xs) var(--font-sans,system-ui,sans-serif); }
.report-setup-form { display:flex; flex-direction:column; gap:13px; margin-top:13px; }
.report-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.report-mode-card { position:relative; min-height:68px; padding:10px 34px 10px 10px; display:flex; align-items:flex-start; gap:9px; text-align:left; color:var(--text-dim); background:var(--bg-1); border:1px solid var(--border); border-radius:9px; cursor:pointer; transition:border-color .12s,background .12s; }
.report-mode-card:hover { border-color:var(--text-mute); }
.report-mode-card.is-selected { color:var(--text); border-color:color-mix(in srgb,var(--accent) 30%,var(--border)); background:var(--bg-1); }
.report-mode-card__icon { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:var(--text-mute); background:var(--bg-soft); }
.report-mode-card b { display:block; font-size:var(--type-ui); color:var(--text); }
.report-mode-card small { display:block; margin-top:4px; font-size:var(--type-xs); line-height:1.35; color:var(--text-mute); }
.report-mode-card__check { position:absolute; right:11px; top:11px; width:19px; height:19px; display:grid; place-items:center; border-radius:50%; color:transparent; border:1px solid var(--border); }
.report-mode-card.is-selected .report-mode-card__check { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 36%,var(--border)); background:var(--bg-soft); }
.report-controls-grid,.report-date-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.report-date-range { padding:10px; border:1px solid var(--border-soft); border-radius:9px; background:var(--bg-soft); }
.report-control { display:flex; flex-direction:column; gap:5px; min-width:0; }
.report-control__label { font-size:var(--type-xs); font-weight: 600; color:var(--text-dim); }
.report-control__input { width:100%; max-width:none; font-size:var(--type-sm); }
.report-control small { font-size:var(--type-2xs); line-height:1.3; color:var(--text-mute); }
.report-static-result { min-height:36px; padding:8px 10px; display:flex; align-items:center; gap:7px; border:1px solid var(--border-soft); border-radius:8px; color:var(--text); background:color-mix(in srgb,var(--bg-1) 82%,transparent); font-size:var(--type-sm); font-weight:600; }
.report-setup-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:2px; }
.report-setup-foot > span { display:flex; align-items:center; gap:5px; max-width:430px; font-size:var(--type-xs); color:var(--text-mute); }
.report-preview-empty { min-height:56px; padding:11px 12px; border:1px dashed var(--border); border-radius:var(--radius); color:var(--text-mute); background:var(--bg-1); }
.report-advanced { border-top:1px solid var(--border-soft); padding-top:7px; }
.report-advanced summary, .report-history summary { cursor:pointer; font-size:var(--type-sm); color:var(--text-mute); }
.report-history { padding:8px 10px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--bg-1); }
.report-history-empty { padding:12px; border:1px dashed var(--border); border-radius:var(--radius); font-size:var(--type-sm); color:var(--text-mute); text-align:center; background:var(--bg-1); }
#report-list > [id^='report-card'] ~ .report-history-empty,
#digest-list > [id^='digest-card'] ~ .report-history-empty { display:none; }
.report-coverage { padding:12px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--bg-1); }
.report-coverage.is-empty { border-color:var(--border); background:var(--bg-1); }
.report-coverage__head { display:flex; align-items:center; gap:10px; }
.report-coverage__heading { flex:1; min-width:130px; }
.report-coverage__heading b { display:block; font-size:var(--type-ui); color:var(--text); }
.report-coverage__heading span { display:block; margin-top:2px; font-size:var(--type-xs); color:var(--text-mute); }
.report-coverage__tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.report-coverage__tags .chip { font-size:var(--type-2xs); }
.report-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.report-metric { display:flex; align-items:center; gap:8px; padding:8px 9px; border:1px solid var(--border-soft); border-radius:9px; background:var(--bg-2); }
.report-metric__icon { flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:var(--text-mute); background:var(--bg-soft); }
.report-metric.is-good .report-metric__icon,
.report-metric.is-warn .report-metric__icon { color:var(--text-mute); background:var(--bg-soft); }
.report-metric b { display:block; font:700 var(--type-section) var(--font-mono,monospace); line-height:1; color:var(--text); }
.report-metric span:not(.report-metric__icon) { display:block; margin-top:3px; font-size:var(--type-2xs); color:var(--text-mute); }
.report-coverage-list { margin-top:10px; border:1px solid var(--border-soft); border-radius:9px; overflow:hidden; }
.report-coverage-list > summary { padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; font-size:var(--type-sm); font-weight:600; color:var(--text-dim); background:var(--bg-soft); }
.report-coverage-list__summary { font-size:var(--type-xs); font-weight:400; color:var(--text-mute); }
.report-coverage-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.report-coverage-column { min-width:0; padding:10px; }
.report-coverage-column + .report-coverage-column { border-left:1px solid var(--border-soft); }
.report-coverage-column header { display:flex; align-items:center; gap:5px; padding-bottom:7px; font-size:var(--type-xs); font-weight:700; text-transform:uppercase; letter-spacing:.035em; color:var(--success); }
.report-coverage-column.is-excluded header { color:var(--warn); }
.report-coverage-column header span { margin-left:auto; min-width:19px; padding:2px 5px; text-align:center; border-radius:9px; color:var(--text-mute); background:var(--bg-soft); }
.report-coverage-items { display:flex; flex-direction:column; gap:4px; }
.report-coverage-item { width:100%; padding:6px 7px; display:flex; align-items:flex-start; gap:7px; text-align:left; border:0; border-radius:6px; color:var(--text-dim); background:transparent; font-size:var(--type-xs); line-height:1.35; }
button.report-coverage-item { cursor:pointer; }
button.report-coverage-item:hover { color:var(--text); background:var(--bg-soft); }
.report-coverage-item > span:nth-child(2) { flex:1; min-width:0; }
.report-coverage-item b { display:block; font-weight:500; color:var(--text-dim); }
.report-coverage-item small { display:block; margin-top:2px; color:var(--text-mute); }
.report-coverage-item__id { flex:0 0 auto; font:600 var(--type-2xs) var(--font-mono,monospace); color:var(--info); }
.is-excluded .report-coverage-item__id { color:var(--text-mute); }
.report-coverage-none { padding:7px; font-size:var(--type-xs); color:var(--text-mute); }
.report-coverage-action { margin-top:10px; padding:9px 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1px solid var(--border-soft); border-radius:9px; background:var(--bg-2); }
.report-coverage-action > div { flex:1; min-width:220px; }
.report-coverage-action b { display:block; font-size:var(--type-sm); color:var(--text); }
.report-coverage-action span { display:block; margin-top:2px; font-size:var(--type-xs); color:var(--text-mute); }
.report-coverage-action__icon { flex:0 0 28px; width:28px; height:28px; display:grid!important; place-items:center; border-radius:8px; color:var(--text-mute)!important; background:var(--bg-soft); }
.report-coverage__foot { margin-top:11px; padding-top:11px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--border-soft); }
.report-coverage__foot > div { min-width:0; }
.report-coverage__foot b { display:flex; align-items:center; gap:5px; font-size:var(--type-sm); color:var(--success); }
.report-coverage__foot b.is-warn { color:var(--warn); }
.report-coverage__foot span { display:block; margin-top:3px; font-size:var(--type-xs); color:var(--text-mute); }
.report-result-card { position:relative; padding:12px; display:flex; gap:10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-1); }
.report-result-card.is-ready { display:block; border-color:var(--border); background:var(--bg-1); }
.report-result-card.is-review { border-color:color-mix(in srgb,var(--warn) 46%,var(--border)); }
.report-result-card.is-running { border-color:color-mix(in srgb,var(--info) 42%,var(--border)); }
.report-result-card.is-failed { border-color:color-mix(in srgb,var(--danger) 45%,var(--border)); }
.report-result-card.is-cancelled { border-color:color-mix(in srgb,var(--text-mute) 45%,var(--border)); }
.report-result-card.is-deleted { align-items:center; color:var(--text-mute); font-size:var(--type-sm); }
.report-result-card__head { display:flex; align-items:flex-start; gap:10px; }
.report-result-status { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:var(--text-mute); background:var(--bg-soft); }
.is-running .report-result-status { color:var(--info); background:var(--info-soft); }
.is-review .report-result-status { color:var(--warn); background:color-mix(in srgb,var(--warn) 12%,transparent); }
.is-failed .report-result-status { color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }
.is-cancelled .report-result-status { color:var(--text-mute); background:var(--bg-soft); }
.report-result-main { flex:1; min-width:0; }
.report-result-title { display:flex; align-items:center; gap:7px; }
.report-result-title b { font-size:var(--type-ui); font-weight:600; color:var(--text); }
.report-result-title > span { padding:2px 6px; border-radius:8px; font-size:var(--type-2xs); color:var(--text-mute); background:var(--bg-soft); }
.report-result-main > p { margin:6px 0 0; font-size:var(--type-xs); line-height:1.4; color:var(--text-mute); }
.report-result-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:5px; }
.report-result-meta span { padding:2px 6px; border-radius:8px; font-size:var(--type-2xs); color:var(--text-mute); background:var(--bg-soft); }
.report-result-meta time { margin-left:auto; font-size:var(--type-2xs); color:var(--text-mute); }
.report-result-progress { height:3px; margin-top:10px; overflow:hidden; border-radius:3px; background:var(--bg-soft); }
.report-result-progress i { display:block; width:42%; height:100%; border-radius:inherit; background:var(--info); animation:report-progress 1.35s ease-in-out infinite alternate; }
@keyframes report-progress { to { transform:translateX(135%); } }
.report-editor { margin-top:13px; }
.report-review-warnings { margin-top:10px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border)); border-radius:8px; background:color-mix(in srgb,var(--warn) 5%,transparent); }
.report-review-warnings summary { display:flex; align-items:center; gap:5px; cursor:pointer; color:var(--warn); font-size:var(--type-xs); font-weight: 600; }
.report-review-warnings p { margin:6px 0 0; color:var(--text-dim); font-size:var(--type-xs); line-height:1.45; }
.report-editor__topline { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.report-editor__topline label { font-size:var(--type-xs); font-weight:700; color:var(--text-dim); }
.report-editor__topline span { font-size:var(--type-xs); color:var(--text-mute); }
.report-editor textarea { width:100%; min-height:230px; padding:11px 12px; font-size:var(--type-body); line-height:1.55; border-radius:9px; resize:vertical; background:var(--bg-1); }
.report-editor__actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:8px; }
.report-editor__actions > span { flex:1; }
.report-sources { margin-top:10px; border:1px solid var(--border-soft); border-radius:9px; overflow:hidden; background:var(--bg-1); }
.report-sources > summary { padding:9px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; font-size:var(--type-xs); color:var(--text-dim); background:var(--bg-soft); }
.report-sources > summary > span:first-child { display:flex; align-items:center; gap:5px; }
.report-sources > summary > span:last-child { min-width:20px; padding:2px 5px; text-align:center; border-radius:8px; color:var(--text-mute); background:var(--bg-2); }
.report-sources__list { display:flex; flex-direction:column; gap:1px; padding:7px; }
.report-source { padding:7px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:8px; border-radius:6px; }
.report-source:hover { background:var(--bg-soft); }
.report-source > button { padding:0; border:0; color:var(--info); background:none; cursor:pointer; font:600 var(--type-xs) var(--font-mono,monospace); }
.report-source b { display:block; font-size:var(--type-xs); font-weight:500; color:var(--text-dim); }
.report-source div > span { display:block; margin-top:2px; font-size:var(--type-2xs); color:var(--text-mute); }
.report-source__links { display:flex; gap:4px; }
.report-source__links a { width:23px; height:23px; display:grid; place-items:center; border-radius:6px; color:var(--text-mute); background:var(--bg-soft); }
.report-source__links a:hover { color:var(--info); }
@media (max-width: 680px) {
    .report-workspace__head { grid-template-columns:1fr; gap:9px; }
    .report-workspace__icon { display:none; }
    .report-workspace__meta { justify-content:flex-start; }
    .report-mode-grid,.report-controls-grid,.report-date-range { grid-template-columns:1fr; }
    .report-setup-foot { align-items:stretch; flex-direction:column; }
    .report-setup-foot .btn { width:100%; justify-content:center; }
    .report-metrics { grid-template-columns:1fr; }
    .report-coverage__head,.report-coverage__foot { align-items:stretch; flex-direction:column; }
    .report-coverage__tags { justify-content:flex-start; }
    .report-coverage-columns { grid-template-columns:1fr; }
    .report-coverage-column + .report-coverage-column { border-left:0; border-top:1px solid var(--border-soft); }
    .report-coverage__foot .btn { width:100%; justify-content:center; }
    .report-result-meta time { width:100%; margin-left:0; }
    .report-editor__actions > span { display:none; }
    .report-editor__actions .btn { flex:1; justify-content:center; }
    .report-editor__topline { align-items:flex-start; flex-direction:column; gap:2px; }
}


@media (max-width: 640px) {
    .sel-modal-backdrop { padding: 0; }
    .sel-modal {
        max-width: none;
        max-height: 100vh;
        border-radius: 0;
    }
    .sel-modal__head,
    .sel-modal__body,
    .sel-modal__foot { padding-inline: 12px; }
}

.cluster-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    box-shadow: var(--shadow-card);
    /* position: relative — контекст для абсолютно позиционированной
       звёздочки в правом верхнем углу (.cluster-star-btn). */
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    /* Toolbar теперь span'ит обе колонки — он начинается от самого левого
       края карточки (где score), а не от текста. Так на мобильном кнопки
       не скучковываются справа, а равномерно расходятся по всей ширине. */
    grid-template-areas:
        "left body"
        "toolbar toolbar";
    column-gap: 12px;
    row-gap: 10px;
    transition: border-color .15s, background .15s;
}
.cluster-card:hover { border-color: var(--text-mute); }
.cluster-card[data-card-open-details] { cursor: pointer; }
.cluster-card[data-card-open-details] :is(a, button, input, textarea, select, label, summary, [role="button"]) {
    cursor: pointer;
}

/* Extract-facts in progress. Это НЕ новый bucket и не сигнал важности:
   карточка остаётся на месте, а маленькая метка показывает, что воркер уже
   пересобирает event/claims и результат скоро придёт через SSE. */
.facts-busy-ring {
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius) + 1px);
    padding: 1px;
    background: linear-gradient(115deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 22%, transparent) 22%,
        color-mix(in srgb, var(--accent) 78%, transparent) 50%,
        color-mix(in srgb, var(--accent) 22%, transparent) 78%,
        transparent 100%);
    background-size: 240% 240%;
    opacity: .72;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: factsBusyRing 1.7s linear infinite;
    pointer-events: none;
    z-index: 2;
}

.chip.chip-facts-busy {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
    color: color-mix(in srgb, var(--accent) 72%, var(--text));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft));
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.facts-busy-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    animation: factsBusyDot 1.25s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes factsBusyRing {
    from { background-position: 120% 50%; }
    to { background-position: -120% 50%; }
}

@keyframes factsBusyDot {
    0%, 100% { transform: scale(.82); opacity: .62; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent); }
    50% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 4px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .facts-busy-ring,
    .facts-busy-dot {
        animation: none;
    }
}

/* ─── Стопка-индикатор материалов ────────────────────────────────────
   Реализация через box-shadow самой карточки. Каждый «слой» = пара
   shadow'ов:
     • fill (`0 Y 0 0 var(--bg-1)`) — заливка цветом фона карточки
     • border (`0 Y 0 1px var(--border)`) — на 1px шире = тонкая обводка
   Spread 0 у fill = слой ТОЧНО той же ширины что карточка (без
   перспективы / сужения вглубь). Box-shadow наследует border-radius
   карточки (14px) → нижние скруглённые углы каждого слоя идентичны
   углам самой карточки. Слои рисуются ЗА карточкой нативно — карточка
   закрывает всё кроме «выступающего» нижнего края на каждом шаге Y.

   Шаг между слоями = 6px. К карточке добавлен margin-bottom = глубине
   стопки, чтобы следующая карточка отстояла от ПОСЛЕДНЕГО слоя ровно
   на flex-gap (8px) — расстояние «отсчитывается от последней границы»,
   как просил пользователь.

   Почему НЕ div'ы внутри article: z-index:-1 трюк ломается потому что
   article без явного z-index не создаёт stacking context, и слой
   улетает выше по дереву (за фон страницы). С transform во время
   свайпа stacking context появляется — слой возвращается, но это
   нестабильно. Box-shadow рисуется как часть отрисовки самого элемента
   и работает надёжно везде.

   На bucket-цвета слои не реагируют (нейтральный --border).

   Цвет каждого слоя — CSS-переменная (--stack-color-1..4), fallback на
   --border. Это нужно чтобы можно было перекрасить ВЕРХНИЕ N слоёв в
   --warn для индикации «эти материалы пришли ПОСЛЕ публикации». Логика
   перекраски — через data-update-layers (см. правила ниже). */
.cluster-card.stack-1 {
    box-shadow:
        var(--shadow-card),
        0 6px 0 0 var(--bg-1),
        0 6px 0 1px var(--stack-color-1, var(--border));
    margin-bottom: 6px;
}
.cluster-card.stack-2 {
    box-shadow:
        var(--shadow-card),
        0 6px 0 0 var(--bg-1),
        0 6px 0 1px var(--stack-color-1, var(--border)),
        0 12px 0 0 var(--bg-1),
        0 12px 0 1px var(--stack-color-2, var(--border));
    margin-bottom: 12px;
}
.cluster-card.stack-3 {
    box-shadow:
        var(--shadow-card),
        0 6px 0 0 var(--bg-1),
        0 6px 0 1px var(--stack-color-1, var(--border)),
        0 12px 0 0 var(--bg-1),
        0 12px 0 1px var(--stack-color-2, var(--border)),
        0 18px 0 0 var(--bg-1),
        0 18px 0 1px var(--stack-color-3, var(--border));
    margin-bottom: 18px;
}
.cluster-card.stack-4 {
    box-shadow:
        var(--shadow-card),
        0 6px 0 0 var(--bg-1),
        0 6px 0 1px var(--stack-color-1, var(--border)),
        0 12px 0 0 var(--bg-1),
        0 12px 0 1px var(--stack-color-2, var(--border)),
        0 18px 0 0 var(--bg-1),
        0 18px 0 1px var(--stack-color-3, var(--border)),
        0 24px 0 0 var(--bg-1),
        0 24px 0 1px var(--stack-color-4, var(--border));
    margin-bottom: 24px;
}

/* Overflow (>5 материалов) не различается визуально — все 4 слоя
   одного цвета (--border). Box-shadow не умеет dashed, а отдельный
   div вокруг predпоследнего слоя ломает swipe (z-index артефакты).
   Точное число материалов остаётся в title-tooltip карточки. */

/* Перекраска ВЕРХНИХ слоёв стопки для индикации post-publish-обновлений.
   Логика (data-update-layers на article в feed_card.html):
     • 0 updates → атрибута нет, слои обычного цвета
     • 1 update → атрибута нет (карточка уже подсвечена .has-post-update)
     • 2 updates → data-update-layers="1" → красим верхний 1 слой
     • 3 updates → data-update-layers="2" → красим верхние 2 слоя
     • ... до 4 (max видимых слоёв)
   Цвет = --post-update-accent (#593A13), такой же как у border-left
   карточки в .has-post-update — визуальная связка «карточка + стопка». */
.cluster-card[data-update-layers="1"] { --stack-color-1: var(--post-update-accent); }
.cluster-card[data-update-layers="2"] {
    --stack-color-1: var(--post-update-accent);
    --stack-color-2: var(--post-update-accent);
}
.cluster-card[data-update-layers="3"] {
    --stack-color-1: var(--post-update-accent);
    --stack-color-2: var(--post-update-accent);
    --stack-color-3: var(--post-update-accent);
}
.cluster-card[data-update-layers="4"] {
    --stack-color-1: var(--post-update-accent);
    --stack-color-2: var(--post-update-accent);
    --stack-color-3: var(--post-update-accent);
    --stack-color-4: var(--post-update-accent);
}

/* Inline Lucide-иконки в потоке текста/чипов (заменили эмодзи). В flex-
   контейнерах vertical-align игнорируется, так что правило безопасно и
   влияет только на иконки, стоящие прямо в тексте — поднимает их к базовой
   линии шрифта, чтобы не «проседали». */
/* Tailwind CDN Preflight ставит svg{display:block} — из-за этого иконка вне
   flex-контейнера (в <summary>, заголовках секций и т.п.) уходила на свою
   строку и роняла текст вниз. Возвращаем инлайновое поведение. В .chip и
   прочих inline-flex это ни на что не влияет (там раскладку задаёт flex). */
.lucide { display: inline-block; vertical-align: -0.15em; }

/* Чипы-иконки (breaking, sensitive) — компактные. Иконка центрируется
   по строке чипа. */
.chip.cluster-flag-chip {
    font-size: var(--type-ui);
    padding: 2px 6px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

/* Звёздочка «важная тема» — правый верхний угол карточки. Вынесена из
   заголовочного flex-блока в абсолютное позиционирование, чтобы:
     • не сжимала ширину заголовка длинных тем;
     • визуально выделялась как «маркер» вне основного потока;
     • не двигалась при свайпе (карточка — overflow:hidden контейнер
       для свайпа, звезда лежит поверх).
   Состояния: .is-on — отмечена (золотая, заполненная). По умолчанию —
   приглушённый контур (text-mute). Z-index выше swipe-fillов. */
.cluster-star-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    color: var(--text-mute);
    opacity: 0.55;
    border-radius: 4px;
    transition: color .15s, opacity .15s, background .15s, transform .12s;
}
.cluster-star-btn:hover {
    opacity: 1;
    background: var(--bg-2);
    transform: scale(1.08);
}
.cluster-star-btn.is-on {
    color: var(--warn);
    opacity: 1;
}
.cluster-star-btn.is-on:hover {
    background: var(--warn-soft);
}

/* Акцент для карточек в «В работе» — они уже взяты в очередь редактора
   (selected) или обрабатываются ИИ (processing). Чтобы визуально отличать
   от обычной Ленты, даём акцентный левый бордер + лёгкий полупрозрачный
   фон. Тонко, без лишнего шума. */
.cluster-card.cluster-bucket-in_work {
    border-left: 3px solid var(--info);
    background: linear-gradient(to right, color-mix(in srgb, var(--info) 5%, transparent) 0%, var(--bg-1) 60%);
}
.cluster-card.cluster-bucket-in_work:hover {
    border-color: var(--info);
}
/* «Обработано» — серо-зелёный акцент, дело сделано. */
.cluster-card.cluster-bucket-done {
    border-left: 3px solid var(--success);
    opacity: 0.92;
}
/* «Обновление по теме» — у обработанной/опубликованной новости появились
   свежие материалы. Автологикой такой кластер уезжает в bucket in_work
   (см. _recompute_cluster_stats finalized-ветка). На случай если кластер
   сейчас в done (редактор уже сбросил обновление обратно через
   mark-processed) — там тоже подсвечиваем светлее фон. */
.cluster-card.has-post-update {
    /* Жёлтое свечение карточки (border-left + hover + background tint) —
       привычный визуал «новые материалы пришли», не трогаем.
       --post-update-accent (#593A13) используется ТОЛЬКО на перекрашенных
       верхних слоях стопки — см. правила data-update-layers ниже. */
    border-left: 3px solid var(--warn);
    opacity: 1;
    background: linear-gradient(to right, color-mix(in srgb, var(--warn) 8%, transparent) 0%, var(--bg-1) 55%);
}
.cluster-card.has-post-update:hover {
    border-color: var(--warn);
}
/* Чип «обновление +N» — золотистый, заметный. Перекликается с
   has-post-update-border, чтобы редактор сразу связывал.
   Использует --warn-fg-on: в тёмной теме (warn=ярко-жёлтый) это #1a1a1a,
   в светлой (warn=тёмно-коричневый) это #ffffff. Контраст ≥7:1 в обоих
   случаях. */
.chip.chip-update.chip-filled {
    background: var(--warn);
    color: var(--warn-fg-on);
    border-color: var(--warn);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
}
/* «Скрыто» (soft-hide) — приглушённо, серая полоса. Бэк думает что это
   неинтересно, но может всплыть обратно при новых материалах. */
.cluster-card.cluster-bucket-hidden {
    border-left: 3px solid var(--text-mute);
    opacity: 0.75;
    background: linear-gradient(to right, color-mix(in srgb, var(--text-mute) 3%, transparent) 0%, var(--bg-1) 60%);
}
.cluster-card.cluster-bucket-hidden .cluster-title {
    color: var(--text-dim);
}
/* «Архив» — сильно приглушённое, dashed-граница. Решение редактора:
   «не появлятся снова, новые материалы не подтягивать». */
.cluster-card.cluster-bucket-archive {
    border-left: 3px dashed var(--text-mute);
    opacity: 0.6;
    background: var(--bg-soft);
}
.cluster-card.cluster-bucket-archive .cluster-title {
    color: var(--text-mute);
    text-decoration: line-through;
    text-decoration-color: var(--border);
}
.cluster-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Вид карточек: один триггер в тулбаре и три прежних режима в меню. */
.feed-view-picker {
    position: relative;
    z-index: 44;
    flex: 0 0 40px;
}
.feed-view-picker > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    list-style: none;
}
.feed-view-picker > summary::-webkit-details-marker { display: none; }
.feed-view-picker > summary:hover,
.feed-view-picker[open] > summary { color: var(--text); background: var(--bg-2); }
.feed-view-picker > summary span { display: inline-flex; }
.feed-view-picker__menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 90;
    display: grid;
    gap: 2px;
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-1);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55), var(--shadow-card);
}
.feed-view-picker__menu .feed-density-btn {
    justify-content: flex-start;
    gap: 9px;
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 4px;
}

/* Текстовые переключатели режимов «Обстановки» используют прежний
   сегментированный контрол. */
.feed-density {
    display: inline-flex; align-items: stretch;
    height: 30px;                       /* не выше поля поиска (см. .feed-search) */
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
/* Кнопки вида — только иконки (текст «Список»/«Плитка» убран, смысл понятен
   по значку + tooltip), поэтому квадратные и компактные. */
.feed-density-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: var(--type-ui); font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.feed-density-btn:hover { color: var(--text); }
.feed-density-btn.is-on {
    background: var(--bg-1);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.feed-density-btn svg { flex-shrink: 0; }

.cluster-row-id,
.cluster-row-date,
.cluster-row-status {
    display: none;
}
.cluster-source-type-chip {
    display: none;
}

/* ─── «Плитка»: та же карточка Ленты, но в многоколоночной сетке ────────
   Включается классом .feed-compact на #feed-grid (client-side, localStorage,
   см. feedDensityToggle() в feed.html). Только CSS — сервер отдаёт те же
   карточки. Класс переживает HTMX innerHTML-своп (#feed-grid не пересоздаётся).

   Задача (по просьбе редактора): плитка должна выглядеть как НАСТОЯЩАЯ
   карточка Ленты, только уже — вся разница между плитками идёт лишь от
   СТАТУСА карточки (bucket-цвет border-left, прозрачность hidden/архива,
   бейдж свежести слева). Поэтому «тело» карточки не трогаем: свежесть,
   чипы стран/категории/источников, чекбокс, заголовок — всё как в Ленте.

   Раскладка плитки (по просьбе редактора): ВЕРХНИЙ ряд — левая колонка
   (свежесть/даты) и заголовок «как в Ленте»; всё ОСТАЛЬНОЕ (чипы стран/
   категории/источников, orig-заголовок, ошибка) — ПОД ними во всю ширину,
   чтобы левая колонка не пустовала. Достигается display:contents на
   .cluster-body: её дети встают прямо в грид карточки (у .cluster-head
   contents уже базово), и мы раскладываем их через grid-area.

   Прячем только то, что не помещается в плитку по смыслу:
     • тулбар действий — в плитке действия открываются кликом по заголовку
       (→ «Детали»); тулбар всегда доступен там же;
     • подсказку-дубль (dup-suggest) — крупный блок с кнопками, ломает сетку;
     • «стопку» (box-shadow слоёв + margin-bottom) — выступающие снизу слои
       залезали бы в gap соседних плиток. */
.feed-compact .feed-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    /* stretch — плитки в ряду тянутся до высоты самой высокой, чтобы под
       низкими не зияли «дыры» (то же поведение, что у .sit-grid в Обстановке). */
    align-items: stretch;
}
.feed-compact .feed-card-list .feed-sentinel { grid-column: 1 / -1; }
.feed-compact .cluster-card {
    /* Верхний ряд: [ левая колонка | заголовок ]. Всё прочее «тело» —
       рядами ниже во всю ширину (grid-column: 1 / -1). */
    grid-template-columns: 44px 1fr;
    grid-template-areas: "left title";
    column-gap: 12px;
    row-gap: 8px;
    padding: 11px 13px;
    margin-bottom: 0 !important;
    box-shadow: var(--shadow-card) !important;
    /* Карточка тянется до высоты соседей (align-items:stretch у сетки), но
       её внутренний грид НЕ должен раздавать лишнюю высоту своим рядам —
       иначе чипы/бейджи расползаются по вертикали. Пакуем содержимое к
       верху, свободное место копится снизу. */
    align-content: start;
}
/* «Растворяем» тело — его дети становятся ячейками грида самой карточки. */
.feed-compact .cluster-body { display: contents; }
/* По умолчанию всё тело — во всю ширину, в ряды под шапкой. */
.feed-compact .cluster-body > * { grid-column: 1 / -1; }
/* Заголовок — в верхний ряд, справа от левой колонки. */
.feed-compact .cluster-title-row { grid-area: title; }
/* Убираем верхний отступ чипов — вертикальный ритм держит row-gap грида. */
.feed-compact .cluster-chips { margin-top: 0; }
.feed-compact .cluster-toolbar,
.feed-compact .dup-suggest {
    display: none;
}
/* Карточка с открытым меню «Ещё ▾» — нужно её приподнять выше соседей,
   иначе в hidden/done/archive (opacity<1 → собственный stacking context)
   следующая карточка перекрывает наш dropdown. position:relative + явный
   z-index создаёт у нашей карточки SC выше уровня соседей (auto/0). */
/* ─── «Строки»: сверхкомпактный список по мотивам кластеров в Entities ─── */
.feed-rows .feed-card-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-1);
}
.feed-rows .feed-card-list .feed-sentinel {
    padding: 10px;
}
.feed-rows .cluster-card {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas: "left body";
    align-items: center;
    column-gap: 8px;
    min-height: 38px;
    padding: 7px 10px;
    margin: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}
.feed-rows .cluster-card:last-child {
    border-bottom: 0;
}
.feed-rows .cluster-card:hover {
    background: var(--bg-soft);
}
.feed-rows .cluster-card.has-post-update {
    background: color-mix(in srgb, var(--warn-soft) 42%, transparent);
}
.feed-rows .cluster-left {
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-top: 0;
}
.feed-rows .cluster-left > :not(.cluster-cat-ic) {
    display: none !important;
}
.feed-rows .cluster-cat-ic {
    width: 22px;
    height: 22px;
    margin: 0;
}
.feed-rows .cluster-cat-ic svg {
    width: 13px;
    height: 13px;
}
.feed-rows .cluster-head {
    display: contents;
}
.feed-rows .cluster-body {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) max-content 20px;
    grid-template-areas: "time title chips check";
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.feed-rows .cluster-body > div:first-child:not(.cluster-title-row) {
    display: none;
}
.feed-rows .cluster-title-row {
    display: contents !important;
}
.feed-rows .cluster-row-date,
.feed-rows .cluster-row-status {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    line-height: 1;
    color: var(--text-mute);
    white-space: nowrap;
}
.feed-rows .cluster-row-id {
    display: none !important;
}
.feed-rows .cluster-row-date {
    grid-area: time;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feed-rows .cluster-title {
    grid-area: title;
    display: flex;
    align-items: center;
    margin: 0 !important;
    min-width: 80px;
    max-width: 100%;
    font-size: var(--type-xs);
    font-weight: 400;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
}
.feed-rows .cluster-title-text {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    white-space: normal;
}
.feed-rows .cluster-title::after {
    content: none;
}
.feed-rows .cluster-chips {
    grid-area: chips;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: min(34vw, 260px);
    max-height: 22px;
    margin: 0;
    overflow: hidden;
}
.feed-rows .cluster-chips .chip {
    flex: 0 0 auto;
    max-width: 150px;
    padding: 1px 6px;
    font-size: var(--type-2xs) !important;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-rows .cluster-country-chip {
    max-width: none;
    min-width: 19px;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 0 !important;
}
.feed-rows .cluster-country-chip .country-flag {
    font-size: var(--type-sm);
    line-height: 16px;
}
.feed-rows .cluster-country-chip .country-name {
    display: none;
}
.feed-rows .cluster-chips > :not(.cluster-country-chip):not(.cluster-source-type-chip) {
    display: none !important;
}
.feed-rows .cluster-source-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: none;
    color: var(--text-dim);
}
.feed-rows .cluster-source-type-chip .src-count {
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    opacity: .85;
}
.feed-rows .cluster-source-type-chip svg {
    width: 11px;
    height: 11px;
}
.feed-rows .cluster-row-status {
    display: none !important;
}
.feed-rows .cluster-left-check {
    grid-area: check;
    align-self: center;
    justify-self: end;
    margin: 0 !important;
}
.feed-rows .cluster-country-chip-secondary:not(.cluster-country-chip-first) {
    display: none !important;
}
.feed-rows .cluster-toolbar,
.feed-rows .dup-suggest,
.feed-rows .cluster-error-detail,
.feed-rows .cluster-original-title {
    display: none !important;
}

@media (max-width: 860px) {
    .feed-rows .cluster-body {
        grid-template-columns: 44px minmax(0, 1fr) 20px;
        grid-template-areas: "time title check";
        gap: 7px;
    }
    .feed-rows .cluster-row-date {
        max-width: 44px;
    }
    .feed-rows .cluster-row-status,
    .feed-rows .cluster-chips {
        display: none !important;
    }
}
.cluster-card.menu-open {
    position: relative;
    z-index: 50;
}
.cluster-head {
    grid-area: body;
    display: contents;  /* нужны только дети — cluster-left и cluster-body, они уже размечены через grid */
}
.cluster-body { grid-area: body; min-width: 0; }

/* Левая колонка карточки сверху вниз: score → relative-time → items-badge → checkbox.
   Checkbox с margin-top:auto выталкивается в самый низ — на уровень toolbar справа. */
.cluster-left {
    grid-area: left;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    padding-top: 2px;
}
.cluster-left .nbl-check { margin: 0; }
.cluster-left .cluster-left-check {
    margin-top: auto;  /* выталкивает в самый низ, на уровень toolbar */
}

/* Цветная цифра рейтинга. Без фона/обводки — просто цветной текст. */
.cluster-score {
    font-size: var(--type-lg); font-weight: 700; line-height: 1;
    letter-spacing: -0.01em;
    font-feature-settings: "tnum" 1;
    text-align: center;
    color: var(--text-mute);
}
/* Цветовая шкала score: от акцентного синего (high) до серого (low).
   Раньше было danger/warn — багровый/жёлтый, выглядело как «оповещение».
   Сейчас приятнее: разница в насыщенности одного оттенка. */
.cluster-score.high { color: var(--info); }
.cluster-score.mid  { color: var(--text); }
.cluster-score.low  { color: var(--text-mute); }

/* Относительное время в левой колонке: между score и items-badge.
   Главное число — когда тема впервые появилась (first_seen). */
.cluster-left-time {
    font-size: var(--type-xs); line-height: 1.15;
    color: color-mix(in srgb, var(--accent) 22%, var(--text-mute));
    font-feature-settings: "tnum" 1;
    text-align: center;
    white-space: nowrap;
}
/* «↻ 1ч» — мелкая подпись если к теме прилетел свежий материал.
   Иконка-обновления + время в одной строке: inline-flex, gap небольшой.
   Меньше и тусклее основного, чтобы не отвлекать. */
.cluster-left-time-fresh {
    font-size: var(--type-2xs); line-height: 1.1;
    color: var(--accent);
    opacity: 0.88;
    text-align: center;
    white-space: nowrap;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.cluster-left-time-fresh svg {
    flex-shrink: 0;
}

/* Дата события появляется лишь когда она отличается от первого материала.
   Это небольшая нейтральная метка, а не ещё один приоритетный сигнал. */
.cluster-event-date-chip {
    color: var(--text-mute);
    border-color: color-mix(in srgb, var(--border) 88%, var(--text-mute));
    background: color-mix(in srgb, var(--bg-0) 72%, transparent);
    white-space: nowrap;
}
.cluster-event-date-value {
    color: var(--accent);
    font-feature-settings: "tnum" 1;
}

/* ── Вердикт свежести (FR3) ───────────────────────────────────────────
   Относительное время в левой колонке карточки. Это больше не «пилюля»:
   без подложки и рамки, только текст. Свежесть считывается насыщенностью
   нашего accent-цвета: самое свежее — accent, старое — обычный серый. */
.cluster-fresh {
    font-size: var(--type-2xs); line-height: 1; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    display: inline-flex; align-items: center;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    border: 0;
    background: transparent;
}
/* .cluster-fresh-dot убран: цветную точку у слова сняли по просьбе редактора,
   смысл несёт сам цвет бейджа. Класс больше не используется в шаблоне. */
.cluster-fresh-fresh    { color: var(--accent); }
.cluster-fresh-recent   { color: color-mix(in srgb, var(--accent) 72%, var(--text-mute)); }
.cluster-fresh-aging    { color: color-mix(in srgb, var(--accent) 46%, var(--text-mute)); }
.cluster-fresh-stale    { color: var(--text-mute); }
.cluster-fresh-upcoming { color: color-mix(in srgb, var(--accent) 86%, var(--text)); }

/* Relative-time label: читаемое число вместо капса на 8px («1 ч» /
   «вчера» / «в будущем»), без фона/рамки. */
.cluster-fresh-time {
    font-size: var(--type-2xs); letter-spacing: normal; text-transform: none;
    font-feature-settings: "tnum" 1;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Иконка категории в левой колонке карточки — на месте бывшего словесного
   вердикта свежести. МОНОХРОМ: цвет НЕ категорийный, а нейтральный
   var(--text-mute), поэтому корректен и в светлой теме. Несёт только
   форму-намёк «про что тема», без цветового шума. */
.cluster-cat-ic {
    color: var(--text-mute);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; margin-bottom: 4px;
}
.cluster-cat-ic--facts {
    color: var(--text);
}
.cluster-cat-ic svg { flex-shrink: 0; }

/* Pre-extract NER-хинт «возможно старое» — мягкое жёлтое предупреждение.
   Появляется только до извлечения фактов ИИ (когда точной даты ещё нет). */
.cluster-fresh-maybe {
    font-size: var(--type-2xs); line-height: 1.05; font-weight: 600;
    color: var(--warn);
    text-align: center; margin-top: 3px;
    opacity: 0.9;
}
/* «Старое» — приглушаем заголовок карточки, чтобы старые темы визуально
   отступали на второй план. Только текст заголовка: общий layout и статусы
   (скрыто/архив со своей прозрачностью) не трогаем. */
.cluster-card.fresh-is-stale .cluster-title { opacity: 0.68; }

/* Круглый чип с числом материалов — показывается только если items_count > 1. */
.cluster-items-badge {
    min-width: 26px; height: 26px; padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--type-sm); font-weight: 600; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    font-feature-settings: "tnum" 1;
    box-sizing: border-box;
}

.cluster-title-row { display: flex; align-items: flex-start; gap: 8px; }
.cluster-title { font-size: var(--type-md); font-weight: 600; line-height: 1.3; color: var(--text); }
.cluster-card.card-view-density-compact {
    padding: 10px 12px;
    grid-template-columns: 36px 1fr;
    column-gap: 10px;
    row-gap: 7px;
}
.cluster-card.card-view-density-compact .cluster-chips { margin-top: 5px; }
.cluster-card.card-view-density-compact .cluster-toolbar { padding-top: 7px; gap: 4px; }
.cluster-card.card-view-density-spacious {
    padding: 18px 20px;
    grid-template-columns: 52px 1fr;
    column-gap: 14px;
    row-gap: 12px;
}
.cluster-card.card-view-title-sm .cluster-title { font-size: var(--type-body); }
.cluster-card.card-view-title-lg .cluster-title { font-size: var(--type-lg); line-height: 1.28; }
.cluster-card.card-view-chip-sm .chip {
    font-size: var(--type-2xs);
    padding: 2px 5px;
}
.cluster-card.card-view-chipflow-nowrap .cluster-chips {
    flex-wrap: nowrap;
    overflow: hidden;
    max-height: 25px;
}
.cluster-card.card-view-left-icon_only .cluster-left {
    padding-top: 1px;
}
.cluster-card.card-view-left-hidden {
    grid-template-columns: 1fr;
}
.cluster-card.card-view-left-hidden .cluster-top {
    grid-template-columns: 1fr;
}
.cluster-card.card-view-left-hidden .cluster-left {
    display: none;
}
/* Заголовок-ссылка «открыть Детали» — как в карточке Темы
   (.theme-card__title). Курсор-палец + accent на hover подсказывают
   кликабельность. Модификатор, а не сам .cluster-title, чтобы не навязывать
   pointer там, где заголовок используется без клика. */
.cluster-title--open { cursor: pointer; outline: none; }
.cluster-title--open:hover { color: var(--text); }
.cluster-title--open:focus-visible {
    border-radius: 2px;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.cluster-meta {
    font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-mute);
    /* Раньше был margin-left: 14px ради точки-индикатора слева от заголовка.
       Точку убрали — meta/chips выравниваем по самому заголовку. */
    margin: 4px 0 0 0;
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
}
.cluster-meta .sep { color: var(--border); }
.cluster-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0 0; }

/* Чип имени источника на карточке. Информационная метка —
   приглушённая, без hover/cursor: клика по нему нет (У47 откатили,
   крупный кликабельный чип путал и провоцировал случайные открытия).
   Размер шрифта чуть меньше общего .chip (10.5px вместо 11px) —
   источник это вспомогательная инфа, не должен спорить с заголовком. */
.cluster-source-chip {
    background: var(--bg-2);
    border-color: var(--border);
    color: var(--text-dim);
    font-weight: 400;
    font-size: var(--type-xs);
    padding: 1px 6px;
}
.cluster-source-chip .src-count {
    color: var(--text-mute);
    font-weight: 400;
    margin-left: 2px;
}

/* Цвет по reliability_score убран (просьба редактора): чипы источников
   теперь нейтрально-серые, как обычные .chip — точный reliability виден
   в tooltip, цвет его больше не несёт. Раньше high=зелёный / low=красный
   пестрили в ряду чипов и спорили с заголовком.
   Цвет оставлен ТОЛЬКО у официальных источников (data-official=1) — тонкая
   акцентная рамка, чтобы первоисточник (МО, гос-агентство) выделялся среди
   агрегаторов. Привязку рамки к reliability-tier тоже убрали — официальный
   всегда один акцент. data-reliability-tier в разметке остаётся (tooltip,
   возможный возврат цвета), CSS его просто не красит. */
.cluster-source-chip[data-official="1"] {
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--info-border);
}

/* Чип страны: нейтральный стиль, с флагом-emoji. Главная страна имеет
   приглушённый серый фон — чтобы выделяться без яркого акцента.
   Вторичная — как chip-muted (transparent фон, обычная обводка), такая
   же визуально как чип категории, не «давит». */
.cluster-country-chip {
    background: var(--bg-2);
    border-color: var(--border-soft);
    color: var(--text);
    font-weight: 500;
}
.cluster-country-chip.cluster-country-chip-secondary {
    background: transparent;
    border-color: var(--border);
}

/* Чип организации (НАТО/ЕС/ООН…): визуально в паре с чипом страны —
   организации используются «как страна» (входят страны + есть штаб).
   Иконка слева, размер привязан к строке. Главная — приглушённый фон
   как у primary-страны, вторичная — прозрачная обводка. */
.cluster-org-chip {
    background: var(--bg-2);
    border-color: var(--border-soft);
    color: var(--text);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cluster-org-chip.cluster-org-chip-secondary {
    background: transparent;
    border-color: var(--border);
}
.cluster-org-icon {
    height: 1.05em;
    width: 1.05em;
    display: inline-block;
    vertical-align: -0.15em;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Чип ИИ-категории на карточке использует стандартный .chip-muted —
   сдержанный нейтральный стиль, не перетягивает внимание. Единственный
   цветной акцент — иконка категории (.chip-cat-ic), цвет берётся из
   inline --cat (category_style.color). Текст остаётся нейтральным. */
.chip-cat-ic { color: var(--cat, var(--text-dim)); flex: 0 0 auto; }

/* Compact LLM connection panel in Tech → LLM / ИИ */
.llm-console { display: flex; flex-direction: column; gap: 12px; }
.llm-hero {
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.llm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-xs);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
}
.llm-hero h2 { margin: 0 0 5px; font-size: var(--type-section); line-height: 1.2; color: var(--text); }
.llm-hero p,
.llm-note { margin: 0; font-size: var(--type-sm); line-height: 1.45; color: var(--text-dim); }
.llm-status-stack {
    min-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.llm-status-card {
    min-width: 240px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--accent-border);
    background: linear-gradient(135deg, var(--accent-soft), transparent 70%);
    text-align: right;
}
.llm-status-label {
    font-size: var(--type-xs);
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.llm-status-main {
    margin-top: 4px;
    font-size: var(--type-title);
    line-height: 1.15;
    font-weight: 700;
    color: var(--text);
}
.llm-status-sub {
    margin-top: 4px;
    font-size: var(--type-sm);
    color: var(--text-dim);
}
.llm-setup {
    padding: 0;
    overflow: hidden;
}
.llm-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.llm-step:last-child { border-bottom: 0; }
.llm-step-muted { opacity: .82; }
.llm-step-num {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-size: var(--type-sm);
    font-weight: 700;
}
.llm-step-title {
    font-size: var(--type-md);
    font-weight: 700;
    color: var(--text);
}
.llm-step-help,
.llm-env-hint {
    margin: 3px 0 9px;
    font-size: var(--type-sm);
    line-height: 1.4;
    color: var(--text-dim);
}
.llm-env-hint {
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--bg-0);
    border: 1px solid var(--border-soft);
}
.llm-provider-line {
    display: grid;
    grid-template-columns: minmax(170px, 230px) minmax(200px, 1fr);
    gap: 10px;
    align-items: end;
}
.llm-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.3fr) minmax(320px, .9fr);
    gap: 12px;
}
.llm-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: var(--type-body);
    font-weight: 700;
    color: var(--text);
}
.llm-section-title > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.llm-settings-list { display: flex; flex-direction: column; gap: 8px; }
.llm-setting,
.llm-route-card {
    border: 1px solid var(--border-soft);
    background: var(--bg-0);
    border-radius: var(--radius);
    padding: 10px;
}
.llm-setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
    gap: 10px;
    align-items: start;
}
.llm-setting-label,
.llm-route-title { font-size: var(--type-ui); font-weight: 600; color: var(--text); }
.llm-setting-desc { margin-top: 3px; font-size: var(--type-sm); line-height: 1.35; color: var(--text-dim); }
.llm-setting-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--type-xs);
    color: var(--text-mute);
}
.llm-setting-meta code,
.llm-route-head code { font-size: var(--type-xs); color: var(--text-mute); }
.llm-setting-control .select,
.llm-setting-control .input,
.llm-setting-form .select,
.llm-setting-form .input {
    width: 100%;
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    font-size: var(--type-ui);
}
.llm-reset {
    border: 0;
    background: transparent;
    color: var(--text-mute);
    padding: 0;
    cursor: pointer;
    font-size: var(--type-xs);
}
.llm-reset:hover { color: var(--accent); }
.llm-probe-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
}
.llm-probe-form .select,
.llm-probe-form .input {
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    font-size: var(--type-ui);
}
.llm-mini-label { grid-column: 1 / -1; font-size: var(--type-xs); color: var(--text-mute); }
.llm-route-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.llm-route-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.llm-route-detail {
    margin-top: 8px;
    font-size: var(--type-sm);
    color: var(--text-dim);
}
.llm-route-detail > summary {
    cursor: pointer;
    color: var(--text-mute);
}
.llm-route-detail code {
    display: inline-block;
    margin-top: 5px;
    color: var(--text-mute);
}
.llm-message {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--type-sm);
}
.llm-message-ok { color: var(--success); border-color: var(--success-border); }
.llm-message-bad { color: var(--danger); border-color: var(--danger-border); }
.llm-bottom-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.15fr) minmax(320px, .85fr);
    gap: 12px;
}
.llm-providers > summary,
.llm-advanced > summary {
    cursor: pointer;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 700;
}
.llm-provider-cards {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}
.llm-provider-card {
    padding: 9px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
    background: var(--bg-0);
}
.llm-provider-card.is-active {
    border-color: var(--accent-border);
    background: var(--accent-soft);
}
.llm-provider-name {
    font-size: var(--type-sm);
    font-weight: 700;
    color: var(--text);
}
.llm-provider-card code {
    display: block;
    margin-top: 3px;
    font-size: var(--type-xs);
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.llm-provider-env {
    margin-top: 4px;
    font-size: var(--type-xs);
    color: var(--text-mute);
}

@media (max-width: 900px) {
    .llm-hero,
    .llm-grid,
    .llm-bottom-grid,
    .llm-provider-line,
    .llm-setting { grid-template-columns: 1fr; }
    .llm-hero { flex-direction: column; }
    .llm-status-stack,
    .llm-status-card { align-items: flex-start; min-width: 0; text-align: left; }
}
/* Общая компактная карточка события для «Обстановки» и сюжетной подборки. */
.sit-card {
    display: block;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s, background .12s;
}
.sit-card:hover { border-color: var(--text-mute); background: var(--bg-2); }
.sit-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.sit-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sit-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
}
.sit-score {
    padding: 1px 7px;
    border-radius: 6px;
    font-size: var(--type-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.5;
}
.sit-score-hi  { background: var(--success-soft); color: var(--success); }
.sit-score-mid { background: var(--warn-soft); color: var(--warn); }
.sit-score-lo  { background: var(--bg-2); color: var(--text-mute); }
.sit-country {
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--type-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sit-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: var(--type-body);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.sit-cardmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.sit-cardmeta .cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-dim);
}
.sit-flag img.emoji { height: 1em; width: 1em; vertical-align: -0.12em; }

/* Twemoji конвертирует emoji в <img class="emoji"> (для Windows/Chrome,
   где нативные emoji-флаги не рендерятся). Размер привязываем к
   font-size текущей строки. */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .1em 0 0;
    vertical-align: -0.15em;
    display: inline-block;
}

.cluster-toolbar {
    grid-area: toolbar;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}
.cluster-toolbar .spacer { flex: 1; }

/* Карточка — это рабочая поверхность, а не ещё одна панель управления.
   Убираем разделительную полосу, оставляем один текстовый главный шаг и
   делаем вторичные icon-only действия достаточно крупными для мыши/тача. */
.cluster-toolbar--card {
    gap: 8px;
    padding-top: 4px;
    border-top: 0;
}
.cluster-toolbar--card > .btn:not(.btn-icon),
.cluster-toolbar--card > .cluster-action-split .btn {
    min-height: 36px;
}
.cluster-toolbar--card > .btn-icon,
.cluster-toolbar--card > .cluster-more-wrap > .btn-icon {
    width: 36px;
    height: 36px;
    min-height: 36px;
}
.cluster-toolbar--card > .btn-icon svg,
.cluster-toolbar--card > .cluster-more-wrap > .btn-icon svg {
    width: 18px;
    height: 18px;
}
.cluster-toolbar--card > .btn:not(.btn-icon) svg,
.cluster-toolbar--card > .cluster-action-split .btn svg {
    width: 16px;
    height: 16px;
}
.cluster-toolbar--card > .cluster-more-wrap { margin-left: auto; }
.feed-workspace-page .cluster-toolbar--card > .btn-ghost:hover:not(:disabled),
.feed-workspace-page .cluster-toolbar--card > .cluster-more-wrap > .btn-ghost:hover:not(:disabled) {
    border-color: transparent;
    color: var(--accent);
    background: var(--accent-soft);
}

/* В подробностях действия остаются рядом с содержанием, но не выглядят
   отдельной цветной панелью. Основной шаг получает акцент при наведении. */
.cluster-toolbar--detail {
    gap: 8px;
    padding-top: 2px;
    border-top: 0;
}
.cluster-toolbar--detail > .btn:not(.btn-icon),
.cluster-toolbar--detail > .cluster-action-split .btn {
    min-height: 38px;
}
.cluster-toolbar--detail .btn-primary {
    border-color: var(--border);
    background: var(--bg-2);
    color: var(--text);
}
.cluster-toolbar--detail .btn-primary:hover:not(:disabled) {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
}
.cluster-toolbar--detail > .btn-icon,
.cluster-toolbar--detail > .cluster-more-wrap > .btn-icon {
    width: 36px;
    height: 36px;
    min-height: 36px;
}
.cluster-toolbar--detail > .btn-icon svg,
.cluster-toolbar--detail > .cluster-more-wrap > .btn-icon svg {
    width: 18px;
    height: 18px;
}
.cluster-toolbar--detail > .cluster-more-wrap { margin-left: auto; }
.cluster-toolbar--detail > .btn-ghost:hover:not(:disabled),
.cluster-toolbar--detail > .cluster-more-wrap > .btn-ghost:hover:not(:disabled) {
    border-color: transparent;
    color: var(--accent);
    background: var(--accent-soft);
}

#feed-grid:not(.feed-compact):not(.feed-rows) .feed-card-list {
    gap: 14px;
}

@media (max-width: 720px) {
    .cluster-toolbar--card > .btn-icon,
    .cluster-toolbar--card > .cluster-more-wrap > .btn-icon,
    .cluster-toolbar--detail > .btn-icon,
    .cluster-toolbar--detail > .cluster-more-wrap > .btn-icon {
        width: 40px;
        height: 40px;
        min-height: 40px;
    }
}

/* News/Situation are dense editorial workspaces, but their reading column
   should not stretch with an ultrawide monitor. */
.feed-workspace-page > .min-h-screen > main {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
}

/* Split-button — две кнопки выглядят как одна. Используется в двух местах:
     • is_active (Лента):    [⚡]  | [→ В работу]   (express-btn | queue-btn)
     • is_in_queue (В работе): [✨ В ИИ] | [✓]      (send-llm | done-btn)
   Позиционирование универсальное (`:first-child` / `:last-child`) — любая
   пара кнопок в .cluster-action-split становится split'ом без новых классов.
   Икон-only варианты (cluster-express-btn, cluster-done-btn) добавляют
   плотные паддинги и центровку. */
.cluster-action-split {
    display: inline-flex;
    /* Без зазора между половинками — выглядят как единая кнопка. */
    gap: 0;
}
/* Левая половинка: кругление только слева, правая граница — тонкий «шов». */
.cluster-action-split > .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.30);
}
/* Правая половинка: кругление только справа, левая граница убрана
   чтобы шов не дублировался. */
.cluster-action-split > .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}
/* Hover-эффекты: подсвечивается ТОЛЬКО та половина, на которую навели —
   подкрепляет «это две разные кнопки» визуально. */
.cluster-action-split > .btn:hover:not(:disabled) {
    background: var(--btn-primary-bg-hover);
}

/* Icon-only половинки: ужимаем паддинги, убираем gap.
   Внешняя сторона (где скругление) — чуть больше паддинг, шовная — меньше. */
.cluster-action-split .cluster-express-btn {
    padding-left: 7px;
    padding-right: 6px;
    gap: 0;
}
.cluster-action-split .cluster-done-btn {
    padding-left: 6px;
    padding-right: 7px;
    gap: 0;
}
/* Express-btn-специфика: горизонтально сжатая молния. */
.cluster-action-split .cluster-express-btn svg {
    transform: scaleX(0.82);
    transform-origin: center;
}
.cluster-action-split .cluster-express-btn svg path {
    /* Закрашенная молния (fill), а не просто контур. */
    fill: currentColor;
    stroke-width: 1.5;
}

/* Реальные основные действия редакторских карточек: split-кнопки перехода,
   одиночная кнопка обработки и подтверждение объединения. В покое они серые,
   primary-синий появляется только при наведении. */
.feed-workspace-page .cluster-action-split > .btn.btn-primary,
.feed-workspace-page .cluster-toolbar > .btn.btn-primary,
.feed-workspace-page .dup-suggest-actions > .btn.btn-primary {
    border-color: var(--border);
    color: var(--text-dim);
    background: var(--bg-2);
}
.feed-workspace-page .cluster-action-split > .btn.btn-primary:hover:not(:disabled),
.feed-workspace-page .cluster-toolbar > .btn.btn-primary:hover:not(:disabled),
.feed-workspace-page .dup-suggest-actions > .btn.btn-primary:hover:not(:disabled) {
    border-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-fg);
    background: var(--btn-primary-bg-hover);
}

/* Editorial workspace: queue -> evidence -> draft -> final action. */
.editorial-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.editorial-queue-shell {
    position: sticky;
    top: 14px;
    min-width: 0;
}
.editorial-editor-pane {
    width: min(100%, 920px);
    min-width: 0;
    margin-inline: auto;
}
.editorial-workspace-loading {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: var(--type-sm);
}
.editorial-workspace-empty {
    min-height: 220px;
    display: grid;
    place-content: center;
    gap: 10px;
}
.editorial-workspace-empty .emoji { margin: 0 auto; }
.editorial-queue-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.editorial-calendar-disclosure { position: relative; }
.editorial-calendar-disclosure > summary::-webkit-details-marker { display: none; }
.editorial-calendar-trigger {
    min-height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: var(--type-sm);
    cursor: pointer;
    list-style: none;
}
.editorial-calendar-trigger:hover,
.editorial-calendar-disclosure[open] > .editorial-calendar-trigger {
    color: var(--text);
    background: var(--bg-2);
}
.editorial-calendar-popover {
    position: absolute;
    z-index: 70;
    top: calc(100% + 6px);
    left: 0;
    width: 286px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-card);
}
.editorial-calendar-popover .cal { margin-bottom: 0; }
.editorial-queue-search {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-mute);
}
.editorial-queue-search .input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border-color: transparent;
    background: var(--bg-2);
}
.editorial-queue-search .input:focus { border-color: var(--accent-border); }
.editorial-queue-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.editorial-queue-tabs::-webkit-scrollbar { display: none; }
.editorial-queue-tab {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-mute);
    font: inherit;
    font-size: var(--type-xs);
    white-space: nowrap;
    cursor: pointer;
}
.editorial-queue-tab:hover { color: var(--text); background: var(--bg-2); }
.editorial-queue-tab.active { color: var(--text); background: var(--bg-2); font-weight: 600; }
.editorial-queue-tab-count {
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}
.editorial-queue-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: min(62vh, 680px);
    overflow-y: auto;
    padding-right: 3px;
}
.editorial-queue-list--briefing { max-height: min(70vh, 760px); }
.editorial-queue-empty {
    padding: 28px 8px;
    text-align: center;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.editorial-pending-group {
    margin-top: 16px;
    padding-top: 2px;
}
.editorial-pending-heading {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.editorial-pending-heading > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.editorial-pending-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.editorial-pending-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 28vh;
    overflow-y: auto;
    padding-right: 3px;
}

/* Queue item */
.queue-item {
    display: block; padding: 11px 10px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer; transition: .15s;
    text-decoration: none; color: inherit;
}
.queue-item:hover { background: var(--bg-2); }
.queue-item.active { background: var(--bg-2); border-color: transparent; }
.qi-row { display: flex; align-items: flex-start; gap: 8px; }
.qi-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.qi-content { min-width: 0; flex: 1; }
.qi-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--type-body);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
}
.qi-meta { font-size: var(--type-xs); color: var(--text-mute); margin-top: 4px; }

/* Календарь-навигатор очереди (Рабочий стол) — месяц-сетка над списком.
   Клетки с событиями подсвечены по плотности, пустые дни тусклые. */
.cal { margin-bottom: 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-size: var(--type-ui); font-weight: 600; color: var(--text); letter-spacing: .01em; }
.cal-nav {
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; color: var(--text-dim); text-decoration: none; font-size: var(--type-lg);
    cursor: pointer; user-select: none; transition: .12s;
}
.cal-nav:hover { background: var(--bg-2); color: var(--text); }
.cal-nav-off { color: var(--border); cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-days { grid-auto-rows: 30px; align-items: stretch; }
.cal-dow { margin-bottom: 4px; }
.cal-dow-cell {
    text-align: center; font-size: var(--type-2xs); font-family: var(--font-mono);
    color: var(--text-mute); text-transform: uppercase; line-height: 1.4;
}
.cal-day {
    min-width: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: var(--type-sm); font-variant-numeric: tabular-nums;
    color: var(--text); text-decoration: none; border: 1px solid transparent;
    transition: .12s; cursor: pointer;
}
a.cal-day:hover { border-color: var(--accent-border); }
.cal-day.cal-empty { color: var(--text-mute); opacity: .40; cursor: default; }
.cal-day.dim { opacity: .30; }
.cal-day.cal-empty.dim { opacity: .16; }
.cal-day.today { border-color: var(--accent-border); }
.cal-day.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 700; }
/* Плотность событий (git-граф): подложка через color-mix — адаптивна к теме,
   текст остаётся читаемым на всех уровнях. Нейтральный серый (var(--text)),
   не синий — синий оставлен только для рамки выбора/сегодня. */
.cal-day.lvl1 { background: color-mix(in srgb, var(--bg-2) 30%, transparent); }
.cal-day.lvl2 { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.cal-day.lvl3 { background: color-mix(in srgb, var(--bg-2) 78%, transparent); }
.cal-day.lvl4 { background: var(--bg-2); }
.cal-foot { margin-top: 8px; text-align: center; min-height: 15px; }
.cal-hint { font-size: var(--type-2xs); color: var(--text-mute); }
.cal-reset {
    font-size: var(--type-xs); color: var(--accent); cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.cal-reset:hover { text-decoration: underline; }

/* Event editor */
.event-card-block { display: flex; flex-direction: column; gap: 24px; }
.event-card-header {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 4px 0 2px;
    box-shadow: none;
}
.event-card-title {
    font-family: var(--font-serif);
    font-size: var(--type-section); font-weight: 600; line-height: 1.25;
    margin: 0 0 8px; color: var(--text); letter-spacing: -0.005em;
}
.event-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.event-card-summary { max-width: 76ch; font-size: var(--type-body); line-height: 1.55; color: var(--text-dim); }
.editorial-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 10px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.editorial-event-meta > span + span::before {
    content: "·";
    margin-right: 12px;
    color: var(--text-mute);
}
.editorial-section {
    min-width: 0;
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.editorial-section-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
details.editorial-section > summary.editorial-section-heading {
    min-height: 34px;
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
}
details.editorial-section > summary.editorial-section-heading::-webkit-details-marker { display: none; }
details.editorial-section[open] > summary.editorial-section-heading { margin-bottom: 12px; }
.editorial-section-empty { color: var(--text-mute); font-size: var(--type-sm); }
.editorial-evidence { display: flex; flex-direction: column; gap: 18px; }
.editorial-facts-section .claims-list { gap: 13px; }
.editorial-facts-section .editorial-fact { border-bottom: 0; padding-bottom: 0; }
.editorial-sources-section > div { padding-left: 0; }
.editorial-source-expand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.editorial-media-strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto;
    padding: 2px 1px 8px;
    scroll-snap-type: x proximity;
}
.editorial-media-strip > .media-tile {
    flex: 0 0 184px;
    scroll-snap-align: start;
}
.editorial-media-add { margin-top: 10px; }
.editorial-media-add > summary {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    cursor: pointer;
    list-style: none;
}
.editorial-media-add > summary::-webkit-details-marker { display: none; }
.editorial-media-add[open] > summary { color: var(--text); }
.editorial-media-add__body {
    margin-top: 8px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--bg-2);
}
.editorial-draft-section { position: relative; }
.editorial-draft-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.editorial-draft-heading .editorial-section-heading { margin: 0; }
.editorial-tools-menu { position: relative; }
.editorial-tools-menu > summary::-webkit-details-marker { display: none; }
.editorial-tools-menu__panel {
    position: absolute;
    z-index: 65;
    top: calc(100% + 6px);
    right: 0;
    width: max-content;
    max-width: min(360px, 80vw);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-card);
}
.editorial-tools-menu__panel .btn {
    min-height: 36px;
    justify-content: flex-start;
}
.editorial-note-disclosure {
    margin: 4px 0 14px;
    padding: 0;
}
.editorial-note-disclosure > summary {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.editorial-note-disclosure > summary::-webkit-details-marker { display: none; }
.editorial-note-disclosure[open] > summary { color: var(--text); margin-bottom: 8px; }
.editorial-note-state { color: var(--text-mute); font-size: var(--type-xs); font-weight: 400; }
.editorial-risk-check { margin-left: auto; }
[id^="draft-save-indicator-"] {
    padding: 0 !important;
    background: transparent !important;
    font-size: var(--type-xs) !important;
    font-weight: 400 !important;
}
.editorial-final-actions {
    position: sticky;
    z-index: 30;
    bottom: 12px;
    margin-top: 18px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-1) 94%, transparent);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
}
.editorial-final-actions--quiet { position: static; box-shadow: none; }
.editorial-final-actions__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.editorial-final-actions__primary {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.editorial-publish-actions { display: inline-flex; gap: 8px; }
.editorial-draft-history { margin-top: 14px; }
.editorial-draft-history > summary {
    color: var(--text-mute);
    font-size: var(--type-sm);
    cursor: pointer;
}
.editorial-ai-state {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--text-dim);
    background: var(--bg-2);
}
.editorial-ai-state--done { flex-direction: row; align-items: center; color: var(--success); }
.editorial-ai-state--error { color: var(--danger); background: var(--danger-soft); }
.editorial-ai-state--waiting { color: var(--text-mute); }
.editorial-ai-state__main { display: flex; align-items: center; gap: 10px; }
.editorial-ai-state__copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--type-sm);
}
.editorial-ai-state__copy strong { color: var(--text); font-weight: 600; }
.editorial-ai-state__copy span { color: var(--text-mute); font-size: var(--type-xs); }
.editorial-ai-state__cancel { color: var(--text-mute); }
.editorial-inline-technical { margin-left: 22px; color: var(--text-mute); font-size: var(--type-xs); }
.editorial-inline-technical > summary { cursor: pointer; }
.editorial-technical { margin-top: 2px; }
.editorial-technical > summary {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    cursor: pointer;
    list-style: none;
}
.editorial-technical > summary::-webkit-details-marker { display: none; }
.editorial-technical__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--bg-2);
}
.editorial-technical__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.editorial-technical-section {
    padding: 8px 0;
    border: 0;
    background: transparent;
}
.editorial-technical-section > summary { cursor: pointer; }

@media (max-width: 1024px) {
    .editorial-workspace { grid-template-columns: 1fr; }
    .editorial-queue-shell { position: static; }
    .editorial-queue-list { max-height: 340px; }
    .editorial-pending-list { max-height: 220px; }
}
@media (max-width: 640px) {
    .editorial-workspace { gap: 18px; }
    .editorial-calendar-popover { position: fixed; top: 76px; left: 12px; right: 12px; width: auto; }
    .editorial-final-actions { bottom: 8px; }
    .editorial-final-actions__primary { width: 100%; margin-left: 0; justify-content: flex-end; }
    .editorial-publish-actions { flex: 1; }
    .editorial-publish-actions .btn { flex: 1; }
}
.event-card-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
    margin-top: 12px; font-size: var(--type-sm);
}
.event-card-meta-grid .l {
    color: var(--text-mute); font-family: var(--font-mono);
    font-size: var(--type-2xs); text-transform: uppercase; letter-spacing: 0.06em;
}
.event-card-meta-grid .v { color: var(--text); font-weight: 500; }

.claims-list { display: flex; flex-direction: column; gap: 10px; }
.claim-item { padding-left: 24px; position: relative; font-size: var(--type-body); color: var(--text); }
.claim-item .num {
    position: absolute; left: 0; top: 0;
    font-family: var(--font-mono); font-size: var(--type-xs);
    color: var(--text-mute); font-weight: 500;
}
.claim-meta {
    font-size: var(--type-xs); color: var(--text-mute);
    margin-top: 3px; font-family: var(--font-mono);
}
.editorial-fact {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border-soft);
}
.editorial-fact:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.editorial-fact-details {
    margin: 6px 0 0 24px;
}
.editorial-fact-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.editorial-fact-details > summary::-webkit-details-marker { display: none; }
.editorial-fact-details > summary:hover,
.editorial-fact-details[open] > summary {
    color: var(--text);
    background: var(--bg-2);
}
.editorial-fact-details > summary span {
    color: var(--text-mute);
    font-weight: 400;
}
.editorial-fact-details__list {
    margin-top: 5px;
    padding: 2px 9px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}
.editorial-fact-details__list .fact-detail-item {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* У56: NER-разметка в блоке «Локальная разметка». Labels («персоны:»,
   «локации:» и т.д.) тянули случайный шрифт от родителя — выглядели
   как маленький моноширинный subtitle, тогда как сам текст фактов выше
   нормальный sans 13px. Чтобы блок не разваливался визуально, label'ам
   даём тот же шрифт что у claim-item: sans, 13px, var(--text). Сами
   значения остаются как chip (это всё-таки бейджи). */
.ner-inline { display: flex; flex-direction: column; gap: 8px; }
.ner-row {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
    font-size: var(--type-body); color: var(--text);
}
.ner-label {
    color: var(--text-mute);
    font-weight: 500;
    margin-right: 2px;
}

.risk-block {
    margin-top: 14px; padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.risk-block h4 {
    font-size: var(--type-sm); font-weight: 600; margin: 0 0 8px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-mute); font-family: var(--font-mono);
}
.risk-block ul { margin: 0; padding-left: 18px; font-size: var(--type-ui); color: var(--text); }
.risk-block ul li { margin-bottom: 4px; }

/* Login / Error */
.login-page-body {
    min-height: 100svh;
    overflow-x: hidden;
    background: var(--bg-0);
}
.login-page-body .menu-toggle,
.login-page-body .sidebar-backdrop,
.login-page-body #app-loading-bar { display: none !important; }

.login-shell {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.login-scene {
    width: min(100%, 380px);
}
.login-scene__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-brand {
    display: grid;
    justify-items: center;
    text-align: center;
}
.login-brand__mark {
    width: 48px;
    height: auto;
}
.login-brand__title {
    margin-top: 10px;
    font-family: var(--font-serif);
    font-size: var(--type-title);
    font-weight: 600;
    letter-spacing: -0.015em;
}
.login-panel {
    width: 100%;
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-1);
}
.login-panel__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.login-panel__heading > span {
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 600;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-field {
    display: grid;
    gap: 7px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
}
.login-input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border-color: var(--border);
    background: var(--bg-2);
    font-size: var(--type-body);
}
.login-input:focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-error {
    padding: 8px 10px;
    border: 1px solid var(--danger-border);
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: var(--type-sm);
}
.login-submit {
    width: 100%;
    min-height: 40px;
    align-self: stretch;
    justify-content: center;
    margin-top: 2px;
    border-radius: 6px;
}

@media (max-width: 640px) {
    .login-shell { padding: 18px; }
    .login-panel { padding: 18px; }
}

@media (max-height: 650px) and (min-width: 641px) {
    .login-shell { padding-block: 16px; }
    .login-brand__mark { width: 40px; }
    .login-panel { margin-top: 16px; }
}
.error-card {
    max-width: 380px; margin: 20px auto; padding: 28px;
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    text-align: center;
}
.error-card .code {
    font-family: var(--font-serif); font-size: 56px;
    color: var(--text-mute); font-weight: 500;
    line-height: 1; margin-bottom: 8px;
}

/* Misc */
h1, h2, h3, h4 { color: var(--text); margin: 0; }
pre { font-family: var(--font-mono); font-size: var(--type-ui); color: var(--text-dim); white-space: pre-wrap; }
code { font-family: var(--font-mono); }
.sub { color: var(--text-dim); font-size: var(--type-ui); }
.row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }

/* ============================================================
   Theme cascade overrides — Tailwind utility-классы
   ============================================================ */

.text-slate-100, .text-slate-200 { color: var(--text) !important; }
.text-slate-300, .text-slate-400 { color: var(--text-dim) !important; }
.text-slate-500, .text-slate-600, .text-slate-700 { color: var(--text-mute) !important; }
.text-white { color: var(--text) !important; }
.text-black { color: var(--text) !important; }

.text-rose-200, .text-rose-300, .text-rose-400, .text-rose-500, .text-rose-600 { color: var(--danger) !important; }
.text-red-200,  .text-red-300,  .text-red-400,  .text-red-500,  .text-red-600  { color: var(--danger) !important; }
.text-amber-200, .text-amber-300, .text-amber-400, .text-amber-500 { color: var(--warn) !important; }
.text-yellow-200, .text-yellow-300, .text-yellow-400, .text-yellow-500 { color: var(--warn) !important; }
.text-emerald-200, .text-emerald-300, .text-emerald-400, .text-emerald-500, .text-emerald-600 { color: var(--success) !important; }
.text-green-200, .text-green-300, .text-green-400, .text-green-500, .text-green-600 { color: var(--success) !important; }
.text-sky-200, .text-sky-300, .text-sky-400, .text-sky-500 { color: var(--info) !important; }
.text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500 { color: var(--info) !important; }
.text-indigo-200, .text-indigo-300, .text-indigo-400, .text-indigo-500 { color: var(--accent) !important; }
.text-violet-200, .text-violet-300, .text-violet-400, .text-violet-500 { color: var(--accent) !important; }
.text-purple-200, .text-purple-300, .text-purple-400, .text-purple-500 { color: var(--accent) !important; }

/* Tailwind CDN also generates 100-level and opacity-suffixed colors used by
   newer templates. Pin them to our semantic palette instead of allowing a
   second, theme-independent Tailwind palette to leak into the UI. */
.text-amber-100, [class~="text-amber-100/70"], [class~="text-amber-200/70"],
[class~="text-amber-200/80"], [class~="text-amber-300/70"], [class~="text-amber-300/80"],
.text-orange-300 { color: var(--warn) !important; }
.text-cyan-100, .text-cyan-200 { color: var(--info) !important; }
.text-emerald-100, [class~="text-emerald-300/80"] { color: var(--success) !important; }
.text-indigo-100, .text-violet-100, [class~="text-violet-200/70"] { color: var(--accent) !important; }
[class~="text-sky-200/80"], [class~="text-sky-300/75"] { color: var(--info) !important; }

[class*="bg-slate-700"], [class*="bg-slate-800"] { background-color: var(--bg-2) !important; }
[class*="bg-slate-900"] { background-color: var(--bg-1) !important; }
[class*="bg-slate-950"] { background-color: var(--bg-0) !important; }
.bg-slate-400, .bg-slate-500 { background-color: var(--text-mute) !important; }
.bg-white { background-color: var(--bg-1) !important; }
.bg-black { background-color: var(--bg-0) !important; }

.bg-rose-300, .bg-rose-400, .bg-rose-500, .bg-rose-600,
.bg-red-300,  .bg-red-400,  .bg-red-500,  .bg-red-600   { background-color: var(--danger) !important; }
.bg-amber-300, .bg-amber-400, .bg-amber-500,
.bg-yellow-300, .bg-yellow-400, .bg-yellow-500          { background-color: var(--warn) !important; }
.bg-emerald-300, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600,
.bg-green-300,   .bg-green-400,   .bg-green-500,   .bg-green-600 { background-color: var(--success) !important; }
.bg-sky-400, .bg-sky-500, .bg-blue-400, .bg-blue-500    { background-color: var(--info) !important; }
.bg-indigo-400, .bg-indigo-500, .bg-violet-400, .bg-violet-500, .bg-purple-400, .bg-purple-500 { background-color: var(--accent) !important; }

[class*="bg-rose-300/"], [class*="bg-rose-400/"], [class*="bg-rose-500/"], [class*="bg-rose-600/"],
[class*="bg-red-300/"],  [class*="bg-red-400/"],  [class*="bg-red-500/"],  [class*="bg-red-600/"]  { background-color: var(--danger-soft) !important; }
[class*="bg-amber-300/"], [class*="bg-amber-400/"], [class*="bg-amber-500/"],
[class*="bg-yellow-300/"], [class*="bg-yellow-400/"], [class*="bg-yellow-500/"]                  { background-color: var(--warn-soft) !important; }
[class*="bg-emerald-300/"], [class*="bg-emerald-400/"], [class*="bg-emerald-500/"], [class*="bg-emerald-600/"],
[class*="bg-green-300/"],   [class*="bg-green-400/"],   [class*="bg-green-500/"],   [class*="bg-green-600/"]   { background-color: var(--success-soft) !important; }
[class*="bg-sky-400/"], [class*="bg-sky-500/"], [class*="bg-blue-400/"], [class*="bg-blue-500/"] { background-color: var(--info-soft) !important; }
[class*="bg-cyan-400/"], [class*="bg-cyan-500/"] { background-color: var(--info-soft) !important; }
[class*="bg-indigo-400/"], [class*="bg-indigo-500/"], [class*="bg-violet-500/"], [class*="bg-purple-500/"] { background-color: var(--accent-soft) !important; }
[class*="bg-indigo-950/"] { background-color: var(--accent-soft) !important; }

[class*="border-slate-700"], [class*="border-slate-800"] { border-color: var(--border) !important; }
[class*="border-slate-600"]                                { border-color: var(--border) !important; }
[class*="border-white/"]                                  { border-color: var(--border-soft) !important; }
[class*="border-rose-"], [class*="border-red-"]           { border-color: var(--danger-border) !important; }
[class*="border-amber-"], [class*="border-yellow-"]       { border-color: var(--warn-border) !important; }
[class*="border-emerald-"], [class*="border-green-"]      { border-color: var(--success-border) !important; }
[class*="border-sky-"], [class*="border-blue-"]           { border-color: var(--info-border) !important; }
[class*="border-cyan-"]                                    { border-color: var(--info-border) !important; }
[class*="border-indigo-"], [class*="border-violet-"], [class*="border-purple-"] { border-color: var(--accent-border) !important; }

.hover\:bg-slate-800\/40:hover, .hover\:bg-slate-800\/50:hover, .hover\:bg-slate-800:hover { background-color: var(--bg-2) !important; }
.hover\:border-slate-700:hover, .hover\:border-slate-800:hover { border-color: var(--border) !important; }
.hover\:text-slate-100:hover, .hover\:text-slate-200:hover { color: var(--text) !important; }
.hover\:text-slate-300:hover { color: var(--text-dim) !important; }
.hover\:text-indigo-200:hover, .hover\:text-indigo-300:hover { color: var(--accent) !important; }

.accent-emerald-500 { accent-color: var(--success) !important; }
.accent-indigo-500  { accent-color: var(--accent) !important; }
.accent-amber-500   { accent-color: var(--warn) !important; }
.accent-rose-500    { accent-color: var(--danger) !important; }

/* ============================================================
   Мобильный sidebar-drawer (≤ 900px).
   На десктопе sidebar — обычная колонка, как было.
   На мобилке — выезжает поверх контента, открывается гамбургером.
   ============================================================ */

/* По умолчанию на десктопе скрыты */
.menu-toggle { display: none; }
.sidebar-backdrop { display: none; }

/* Desktop: первый запуск показывает спокойную иконную рейку. Подписи
   возвращаются явной кнопкой в footer; выбор хранится в localStorage. */
@media (min-width: 901px) {
    html[data-sidebar="collapsed"] .sidebar {
        width: 72px;
        min-width: 72px;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    html[data-sidebar="collapsed"] .sidebar-header {
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px !important;
        margin-bottom: 4px !important;
        padding: 0 0 10px !important;
    }
    html[data-sidebar="collapsed"] .sidebar-logo {
        justify-content: center;
        gap: 0;
    }
    html[data-sidebar="collapsed"] .sidebar-logo-title {
        width: 0;
        max-width: 0;
        overflow: hidden;
        opacity: 0;
    }
    html[data-sidebar="collapsed"] .sidebar-header-actions {
        justify-content: center;
    }
    html[data-sidebar="collapsed"] .sidebar-scroll {
        padding-right: 0;
    }
    html[data-sidebar="collapsed"] .sidebar a.nav-item,
    html[data-sidebar="collapsed"] .sidebar .nav-item {
        width: 44px;
        min-height: 42px;
        justify-content: center;
        gap: 0;
        margin-inline: auto;
        padding: 9px;
    }
    html[data-sidebar="collapsed"] .nav-label,
    html[data-sidebar="collapsed"] .nav-count,
    html[data-sidebar="collapsed"] .nav-delta,
    html[data-sidebar="collapsed"] .nav-aux,
    html[data-sidebar="collapsed"] .sidebar-themes-pending,
    html[data-sidebar="collapsed"] .sidebar-theme-count,
    html[data-sidebar="collapsed"] .sidebar-theme-pending {
        width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }
    html[data-sidebar="collapsed"] .sidebar-nav-group {
        height: 9px;
        margin: 4px 0;
        padding: 0;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }
    html[data-sidebar="collapsed"] .sidebar-nav-group.is-first {
        height: 2px;
        margin-top: 0;
    }
    html[data-sidebar="collapsed"] .sidebar-presence {
        margin: 8px 0 2px;
    }
    html[data-sidebar="collapsed"] .sidebar-presence__head {
        width: 44px;
        justify-content: center;
        gap: 3px;
        margin-inline: auto;
        padding-inline: 4px;
    }
    html[data-sidebar="collapsed"] .sidebar-presence__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    html[data-sidebar="collapsed"] .sidebar-presence__count {
        margin-left: 0;
        font-size: var(--type-2xs);
    }
    html[data-sidebar="collapsed"] .sidebar-system {
        display: none;
    }
    html[data-sidebar="collapsed"] .sidebar-footer {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding-inline: 0;
    }
    html[data-sidebar="collapsed"] .sidebar-session {
        display: none;
    }
    html[data-sidebar="collapsed"] .sidebar-collapse-icon--expanded { display: none; }
    html[data-sidebar="collapsed"] .sidebar-collapse-icon--collapsed { display: inline-flex; }
}

@media (max-width: 900px) {
    /* Гамбургер: фиксированная кнопка в углу */
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: var(--bg-1);
        color: var(--text);
        border: 1px solid var(--border-soft);
        cursor: pointer;
        z-index: 60;
        box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    }
    .menu-toggle:hover { background: var(--bg-2); }
    .menu-toggle:active { transform: scale(0.96); }

    /* Sidebar превращается в drawer слева */
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 260px;
        max-width: 84vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        z-index: 70;
        overflow: hidden;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 8px 0 24px rgba(0,0,0,0.45);
    }
    .sidebar-scroll {
        padding-bottom: 8px;
        scrollbar-gutter: auto;
    }
    .sidebar-footer {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
    .sidebar-collapse-toggle { display: none; }
    .sidebar.is-open { transform: translateX(0); }

    /* Затемнение позади открытого drawer */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 65;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
    .sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Main — освобождаем место под гамбургер, уменьшаем поля */
    main {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 60px !important;
    }

    /* Запрет прокрутки body при открытом drawer */
    body.drawer-open { overflow: hidden; }

    /* ============================================================
       Свайпы на карточках ленты (mobile)
       Свайп вправо → /queue (зелёный hint слева, «→ В работу»).
       Свайп влево  → /hide  (жёлтый hint справа, «Скрыть ←»).
       Жесты обрабатывает app.js, CSS отвечает только за визуал.
       touch-action: pan-y — позволяет вертикальный скролл, но
       блокирует браузерный pan-x → у нас полный контроль над dx.
       ============================================================ */
    .cluster-card {
        touch-action: pan-y;
        position: relative;
        /* overflow НЕ ставим — иначе дропдаун «Ещё ▾» в тулбаре будет
           обрезан углами карточки. Подкладки ::before/::after и так
           прижаты к границам карточки через top/bottom/left/right. */
    }
    /* Подложки свайпа. Контент — из data-атрибутов на карточке,
       цвет — через парные классы .swipe-{side}-{ok|info|warn|bad}.
       Карточки без data-* подложек не получают (например processing
       или deleted). */
    .cluster-card.has-swipe-right::before,
    .cluster-card.has-swipe-left::after {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        padding: 0 26px;
        font-size: var(--type-lg);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        transition: opacity 0.12s;
        border-radius: var(--radius);
        width: 90%;
    }
    .cluster-card.has-swipe-right::before {
        content: "→ " attr(data-swipe-right-label);
        left: 0;
    }
    .cluster-card.has-swipe-left::after {
        content: attr(data-swipe-left-label) " ←";
        right: 0;
        justify-content: flex-end;
    }
    /* Цвета по типу действия */
    .cluster-card.swipe-right-ok::before   { color: var(--success); background: linear-gradient(to right, var(--success-soft) 0%, var(--success-soft) 35%, transparent 100%); }
    .cluster-card.swipe-right-info::before { color: var(--info);    background: linear-gradient(to right, var(--info-soft) 0%, var(--info-soft) 35%, transparent 100%); }
    .cluster-card.swipe-right-warn::before { color: var(--warn);    background: linear-gradient(to right, var(--warn-soft) 0%, var(--warn-soft) 35%, transparent 100%); }
    .cluster-card.swipe-right-bad::before  { color: var(--danger);  background: linear-gradient(to right, var(--danger-soft) 0%, var(--danger-soft) 35%, transparent 100%); }
    .cluster-card.swipe-left-ok::after     { color: var(--success); background: linear-gradient(to left, var(--success-soft) 0%, var(--success-soft) 35%, transparent 100%); }
    .cluster-card.swipe-left-info::after   { color: var(--info);    background: linear-gradient(to left, var(--info-soft) 0%, var(--info-soft) 35%, transparent 100%); }
    .cluster-card.swipe-left-warn::after   { color: var(--warn);    background: linear-gradient(to left, var(--warn-soft) 0%, var(--warn-soft) 35%, transparent 100%); }
    .cluster-card.swipe-left-bad::after    { color: var(--danger);  background: linear-gradient(to left, var(--danger-soft) 0%, var(--danger-soft) 35%, transparent 100%); }
    .cluster-card.swipe-armed-right::before { opacity: 1; }
    .cluster-card.swipe-armed-left::after  { opacity: 1; }
    .cluster-card.swiping {
        will-change: transform;
        transition: none;
        /* Поднимаем над подкладками */
        z-index: 1;
    }
}

/* ─────────────────────────────────────────────────────────────
   Текст источника (детали карточки + рабочий стол)
   Читаемая типографика: serif, увеличенный интерлиньяж, красные
   строки (text-indent) для каждого абзаца. Абзацы формируются в
   шаблоне разбиением original_text по \n.
   ───────────────────────────────────────────────────────────── */
.source-text {
    font-family: var(--font-serif);
    font-size: var(--type-body);
    line-height: 1.7;
    color: var(--text-dim);
    /* Длинные ссылки/токены без пробелов не должны рвать вёрстку */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.source-text .source-para {
    margin: 0 0 0.7em 0;
    text-indent: 1.6em;
}
.source-text .source-para:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────
   Детали карточки: оригинал источника.
   Переключатель «Развернуть/Свернуть» вынесен ВПРАВО от заголовка
   (Alpine srcOpen) — не разрывает текст и показывает ровно одну надпись.
   Свёрнуто — тизер (~250 симв.); развёрнуто — весь текст ТЕМ ЖЕ шрифтом
   (12px slate, как тизер). Красные строки для читаемости.
   ───────────────────────────────────────────────────────────── */
.src-toggle-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}
.src-teaser { display: block; margin-bottom: 3px; }
.src-full { margin-top: 2px; }
.src-full .src-para { margin: 0 0 0.6em 0; text-indent: 1.5em; }
.src-full .src-para:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────
   Форма ручного добавления картинки (URL / файл). Раскладка
   в ОДНУ строку (input растёт, кнопка справа фиксирована) вынесена
   в класс, а НЕ в inline-style: у форм висит x-show, и Alpine при
   показе делает el.style.removeProperty('display') — это стирало бы
   inline `display:flex` и форма сваливалась в блок (кнопка уезжала
   под поле). Класс x-show не трогает, поэтому раскладка держится.
   ───────────────────────────────────────────────────────────── */
.media-add-form {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex-wrap: nowrap;
}
.media-add-form > .input,
.media-add-form > input {
    flex: 1 1 0;
    min-width: 0;
}
.media-add-form > .btn {
    flex: 0 0 auto;
}

/* ─────────────────────────────────────────────────────────────
   Зона «Вставить из буфера» (загрузка фото к посту, HTTP-режим,
   где async Clipboard API недоступен — ловим нативный paste).
   ───────────────────────────────────────────────────────────── */
.media-paste-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--text-mute);
    font-size: var(--type-sm);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.media-paste-zone:hover {
    border-color: var(--accent);
    color: var(--text-dim);
}
.media-paste-zone:focus {
    outline: none;
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ============================================================
   Конструктор карточек Ленты: модалка + независимые профили
   Список / Плитка / Строки.
   ============================================================ */
.feed-card-view-launch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent-soft) 28%, var(--bg-1));
}
.feed-card-view-launch-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.feed-card-view-launch-copy > span:last-child { min-width: 0; }
.feed-card-view-launch-copy b,
.feed-card-view-launch-copy small { display: block; }
.feed-card-view-launch-copy b { color: var(--text); font-size: var(--type-sm); }
.feed-card-view-launch-copy small {
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.35;
}
.feed-card-view-launch-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--accent);
    background: var(--accent-soft);
}

.card-view-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(3px);
}
.card-view-modal {
    z-index: 261;
    display: flex;
    flex-direction: column;
    width: min(1040px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
    animation: detailModalIn .2s ease-out;
}
.card-view-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-1);
}
.card-view-modal-head h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--text);
    font-size: var(--type-lg);
}
.card-view-modal-head p {
    margin: 3px 0 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.card-view-modal-head-actions { display: flex; align-items: center; gap: 6px; }
.card-view-modal-head-actions .btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
}
.card-view-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    background: var(--bg-1);
}
.cv-message {
    margin-bottom: 10px;
    padding: 8px 11px;
    border: 1px solid var(--success-border);
    border-radius: 9px;
    color: var(--success);
    background: var(--success-soft);
    font-size: var(--type-sm);
}
.cv-message--bad {
    border-color: var(--danger-border);
    color: var(--danger);
    background: var(--danger-soft);
}
.card-view-designer { display: block; }
.card-view-workspace {
    display: grid;
    grid-template-columns: minmax(390px, 1fr) minmax(380px, 500px);
    gap: 14px;
    align-items: start;
}
.cv-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
}
.cv-mode-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    color: var(--text-mute);
    background: var(--bg-1);
    text-align: left;
    transition: .14s ease;
}
.cv-mode-tab:hover { border-color: var(--border); color: var(--text); }
.cv-mode-tab.is-active {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-soft);
}
.cv-mode-tab > span { min-width: 0; }
.cv-mode-tab b,
.cv-mode-tab small { display: block; }
.cv-mode-tab b { font-size: var(--type-sm); }
.cv-mode-tab small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-panel,
.card-view-preview {
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.cv-panel + .cv-panel,
[data-cv-mode-panel] .cv-panel + .cv-panel { margin-top: 10px; }
.cv-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.cv-section-title { margin: 0; font-size: var(--type-sm); }
.cv-presets { margin-bottom: 10px; }
.cv-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.cv-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.cv-field legend {
    margin-bottom: 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
}
.cv-field--accent {
    grid-column: 1 / -1;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-soft));
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}
.cv-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border-radius: 8px;
    background: var(--bg-2);
}
.cv-segments--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv-segments label { min-width: 0; cursor: pointer; }
.cv-segments input { position: absolute; opacity: 0; pointer-events: none; }
.cv-segments span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 29px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.15;
    text-align: center;
}
.cv-segments input:checked + span {
    border-color: var(--border);
    color: var(--text);
    background: var(--bg-0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.cv-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.cv-toggle {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-0);
}
.cv-toggle:hover { border-color: var(--border); }
.cv-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.cv-toggle-mark {
    position: relative;
    width: 26px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--bg-3);
    transition: .14s ease;
}
.cv-toggle-mark::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-mute);
    transition: .14s ease;
}
.cv-toggle > input:checked + .cv-toggle-mark { background: var(--accent-soft); }
.cv-toggle > input:checked + .cv-toggle-mark::after {
    left: 14px;
    background: var(--accent);
}
.cv-toggle b,
.cv-toggle small { display: block; }
.cv-toggle b { color: var(--text); font-size: var(--type-xs); }
.cv-toggle small {
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.25;
}
.cv-advanced > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: var(--text);
    font-size: var(--type-xs);
}
.cv-advanced > summary span { display: inline-flex; align-items: center; gap: 6px; }
.cv-advanced > summary small { color: var(--text-mute); font-size: var(--type-2xs); font-weight: 400; }
.cv-advanced[open] > summary { margin-bottom: 12px; }
.card-view-preview {
    position: sticky;
    top: 0;
    min-width: 0;
    overflow: hidden;
}
.cv-preview-stage {
    min-height: 190px;
    padding: 12px;
    overflow: auto;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-0);
}
.cv-preview-stage .feed-card-list { min-width: 260px; }
.cv-preview-stage .cluster-card { margin-left: auto; margin-right: auto; }
.cv-preview-stage .cluster-error-detail {
    margin-top: 7px;
    padding: 6px 8px;
    border: 1px solid var(--danger-border);
    border-radius: 7px;
    color: var(--danger);
    background: var(--danger-soft);
    font-size: var(--type-2xs);
}
.cv-preview-stage .cluster-original-title {
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-actions {
    position: sticky;
    bottom: -14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px -14px -14px;
    padding: 11px 14px;
    border-top: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--bg-0) 92%, transparent);
    backdrop-filter: blur(8px);
}

/* Реальные карточки и preview используют одни mode-классы. */
.cluster-left-extra { display: contents; }
.cluster-text-preview {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.42;
    -webkit-box-orient: vertical;
}

:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-hide-list,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-hide-compact,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-hide-rows { display: none !important; }

:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-text-0 .cluster-text-preview,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-text-0 .cluster-text-preview,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-text-0 .cluster-text-preview { display: none; }
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-text-2 .cluster-text-preview,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-text-2 .cluster-text-preview,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-text-2 .cluster-text-preview { -webkit-line-clamp: 2; }
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-text-3 .cluster-text-preview,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-text-3 .cluster-text-preview,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-text-3 .cluster-text-preview { -webkit-line-clamp: 3; }

/* Ограничение строк заголовка. */
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-titlelines-1 .cluster-title-text,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-titlelines-1 .cluster-title-text,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-titlelines-1 .cluster-title-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-titlelines-2 .cluster-title-text,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-titlelines-2 .cluster-title-text,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-titlelines-2 .cluster-title-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-titlelines-3 .cluster-title-text,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-titlelines-3 .cluster-title-text,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-titlelines-3 .cluster-title-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Размер заголовка — отдельный для каждого представления. */
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-title-sm .cluster-title { font-size: var(--type-body); }
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-title-md .cluster-title { font-size: var(--type-md); }
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-title-lg .cluster-title { font-size: var(--type-lg); }
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-title-sm .cluster-title { font-size: var(--type-ui); }
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-title-md .cluster-title { font-size: var(--type-md); }
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-title-lg .cluster-title { font-size: var(--type-lg); }
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-title-sm .cluster-title { font-size: var(--type-2xs); }
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-title-md .cluster-title { font-size: var(--type-sm); }
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-title-lg .cluster-title { font-size: var(--type-body); }

/* Плотность. List продолжает поддерживать legacy card-view-density-*;
   эти селекторы дают независимость плитке и строкам. */
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-density-compact {
    grid-template-columns: 36px 1fr;
    gap: 7px 9px;
    padding: 9px 11px;
}
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-density-comfortable {
    grid-template-columns: 44px 1fr;
    gap: 8px 12px;
    padding: 11px 13px;
}
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-density-spacious {
    grid-template-columns: 52px 1fr;
    gap: 11px 14px;
    padding: 16px 17px;
}
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-density-compact { min-height: 32px; padding: 4px 8px; }
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-density-comfortable { min-height: 38px; padding: 7px 10px; }
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-density-spacious { min-height: 48px; padding: 10px 12px; }

/* Левая колонка и окраска иконки. */
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-left-hidden,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-left-hidden {
    grid-template-columns: 1fr;
}
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-left-hidden .cluster-left,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-left-hidden .cluster-left,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-left-hidden .cluster-left { display: none; }
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-left-hidden {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body";
}
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-left-icon_only .cluster-left-extra,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-left-icon_only .cluster-left-extra,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-left-icon_only .cluster-left-extra { display: none; }

:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-icon-never .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-icon-never .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-icon-never .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-icon-facts .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-icon-facts .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-icon-facts .cluster-cat-ic { color: var(--text-mute); }
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-icon-always .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-icon-always .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-icon-always .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-icon-facts.has-extracted-facts .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-icon-facts.has-extracted-facts .cluster-cat-ic,
:is(#feed-grid, .cv-preview-stage).feed-rows .cv-rows-icon-facts.has-extracted-facts .cluster-cat-ic { color: var(--text); }

/* Чипы и тулбар. */
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-chip-sm .chip,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-chip-sm .chip { padding: 2px 5px; font-size: var(--type-2xs); }
:is(#feed-grid, .cv-preview-stage):not(.feed-compact):not(.feed-rows) .cv-list-chipflow-nowrap .cluster-chips,
:is(#feed-grid, .cv-preview-stage).feed-compact .cv-compact-chipflow-nowrap .cluster-chips {
    flex-wrap: nowrap;
    max-height: 25px;
    overflow: hidden;
}
:is(#feed-grid, .cv-preview-stage).feed-compact .cluster-toolbar:not(.cv-hide-compact) {
    display: flex;
    grid-area: auto;
    grid-column: 1 / -1;
}
:is(#feed-grid, .cv-preview-stage).feed-rows .cluster-toolbar:not(.cv-hide-rows) {
    display: flex !important;
    grid-area: toolbar;
    margin-top: 5px;
}

/* Превью текста превращает строку в двухэтажную только по явной настройке. */
:is(#feed-grid, .cv-preview-stage).feed-rows .cluster-text-preview {
    grid-area: preview;
    margin: 2px 0 0;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.35;
}
:is(#feed-grid, .cv-preview-stage).feed-rows .cluster-card:not(.cv-rows-text-0) .cluster-body {
    grid-template-areas:
        "time title chips check"
        ". preview preview .";
    align-items: start;
}

@media (max-width: 920px) {
    .card-view-workspace { grid-template-columns: 1fr; }
    .card-view-preview { position: static; }
}
@media (max-width: 640px) {
    .card-view-modal-backdrop { padding: 0; }
    .card-view-modal { width: 100%; max-height: calc(100vh - 48px); border-radius: 0; }
    .card-view-modal-body { padding: 0; }
    .cv-mode-tab small { display: none; }
    .cv-field-grid,
    .cv-toggle-grid { grid-template-columns: 1fr; }
    .cv-field--accent { grid-column: auto; }
    .cv-segments--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-actions { margin: 12px -10px -10px; padding: 10px; }
    .cv-save-hint { display: none; }
    .feed-card-view-launch { align-items: flex-start; flex-direction: column; }
}

/* Card-view designer v2. Каркас окна определён единым блоком выше. */
.cvm-designer {
    min-height: 0;
}
.cvm-modebar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-1);
}
.cvm-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(420px, 100%);
    flex: 0 1 420px;
    flex-wrap: nowrap;
    border-color: var(--border-soft);
    border-radius: 6px;
    background: transparent;
}
.cvm-mode-tabs button {
    min-width: 0;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 4px;
    justify-content: center;
}
.cvm-mode-tabs button.active {
    box-shadow: none;
    background: var(--bg-3);
}
.cvm-workspace {
    display: grid;
    grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 16px;
}
.cvm-controls {
    min-width: 0;
}
.cvm-section {
    padding: 0 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border-soft);
}
.cvm-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.cvm-section-head b,
.cvm-section-head small {
    display: block;
}
.cvm-section-head b {
    color: var(--text);
    font-size: var(--type-sm);
}
.cvm-section-head small {
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.35;
}
.cvm-presets {
    padding: 0 0 16px;
}
.cvm-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cvm-preset-row .btn {
    min-height: 34px;
    padding-inline: 10px;
}
.cvm-preset-row .btn.is-active {
    color: var(--text);
    border-color: var(--border);
    background: var(--bg-3);
}
.cvm-setting-list {
    border-top: 0;
}
.cvm-setting-row {
    display: grid;
    grid-template-columns: minmax(120px, .85fr) minmax(190px, 1.35fr);
    gap: 12px;
    align-items: center;
    min-height: 46px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-soft);
}
.cvm-setting-row > span > b,
.cvm-setting-row > span > small {
    display: block;
}
.cvm-setting-row > span > b {
    color: var(--text);
    font-size: var(--type-xs);
    font-weight: 600;
}
.cvm-setting-row > span > small {
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.3;
}
.cvm-setting-row--accent > span > b {
    color: var(--text);
}
.cvm-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
}
.cvm-choice--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cvm-choice label {
    min-width: 0;
    cursor: pointer;
}
.cvm-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cvm-choice span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 4px 5px;
    border-radius: 4px;
    color: var(--text-dim);
    font-size: var(--type-2xs);
    line-height: 1.15;
    text-align: center;
}
.cvm-choice label:hover span {
    color: var(--text);
}
.cvm-choice input:focus-visible + span {
    outline: 2px solid var(--accent-border);
    outline-offset: 1px;
}
.cvm-choice input:checked + span {
    color: var(--text);
    font-weight: 600;
    background: var(--bg-3);
    box-shadow: none;
}
.cvm-primary-settings {
    margin-bottom: 0;
}
.cvm-primary-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    border-bottom: 1px solid var(--border-soft);
}
.cvm-primary-toggles .cvm-toggle-row {
    border-bottom: 0;
}
.cvm-disclosure {
    border-bottom: 0;
}
.cvm-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    color: var(--text);
    font-size: var(--type-xs);
}
.cvm-disclosure > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.cvm-disclosure > summary > small {
    color: var(--text-mute);
    font-size: var(--type-2xs);
    font-weight: 400;
}
.cvm-disclosure[open] {
    padding-bottom: 0;
}
.cvm-advanced-body {
    padding-top: 2px;
}
.cvm-advanced-group {
    padding: 14px 0;
    border-top: 1px solid var(--border-soft);
}
.cvm-advanced-title {
    display: block;
    margin-bottom: 7px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cvm-toggle-list {
    border-top: 0;
}
.cvm-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
}
.cvm-toggle-row > span {
    min-width: 0;
}
.cvm-toggle-row b,
.cvm-toggle-row small {
    display: block;
}
.cvm-toggle-row b {
    color: var(--text);
    font-size: var(--type-xs);
}
.cvm-toggle-row small {
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
    line-height: 1.25;
}
.cvm-toggle-row > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cvm-toggle-row > .toggle {
    pointer-events: none;
}
.cvm-toggle-row > input:checked + .toggle {
    border-color: var(--accent);
    background: var(--accent);
}
.cvm-toggle-row > input:checked + .toggle::after {
    left: 18px;
    background: #fff;
}
.cvm-range-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-top: 2px;
    border-top: 0;
}
.cvm-range {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-dim);
    font-size: var(--type-2xs);
}
.cvm-range b {
    color: var(--text);
    font-family: var(--font-mono);
}
.cvm-preview {
    position: sticky;
    top: 72px;
    min-width: 0;
    padding: 0 0 0 20px;
    overflow: hidden;
    border-left: 1px solid var(--border-soft);
    background: transparent;
}
.cvm-preview > summary {
    cursor: pointer;
    list-style: none;
}
.cvm-preview > summary::-webkit-details-marker { display: none; }
.cvm-preview > summary::after {
    content: "⌄";
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--text-mute);
    font-size: var(--type-sm);
    transition: transform .12s ease;
}
.cvm-preview[open] > summary::after { transform: rotate(180deg); }
.cvm-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.cvm-preview-head b,
.cvm-preview-head small {
    display: block;
}
.cvm-preview-head b {
    color: var(--text);
    font-size: var(--type-sm);
}
.cvm-preview-head small {
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
}
.cvm-preview-stage {
    min-height: 170px;
    max-height: min(560px, calc(100vh - 250px));
    padding: 10px;
    overflow: auto;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-0);
}
.cvm-preview-stage .feed-card-list {
    min-width: 0;
}
.cvm-preview-card-shell {
    display: contents;
}
.cvm-preview-stage .cluster-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    pointer-events: none;
}
.cvm-preview-stage .cluster-more-menu,
.cvm-preview-stage .swipe-cue,
.cvm-preview-stage .feed-sentinel {
    display: none !important;
}
.cvm-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-1);
}
.cvm-actions > span {
    color: var(--text-mute);
    font-size: var(--type-2xs);
}

@media (max-width: 900px) {
    .cvm-workspace {
        grid-template-columns: 1fr;
    }
    .cvm-preview {
        position: static;
        padding: 18px 0 0;
        border-top: 1px solid var(--border-soft);
        border-left: 0;
    }
}
@media (max-width: 640px) {
    .card-view-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }
    .card-view-modal {
        width: 100%;
        height: auto;
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .card-view-modal-head { padding: 9px 10px; }
    .card-view-modal-head .detail-modal-title { font-size: var(--type-md); }
    .card-view-modal-head-actions .btn { width: 30px; height: 30px; min-height: 30px; }
    .cvm-modebar {
        padding: 7px 8px;
    }
    .cvm-mode-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .cvm-mode-tabs button {
        width: auto;
        min-width: 0;
        padding-inline: 5px;
    }
    .cvm-workspace {
        gap: 8px;
        padding: 8px;
    }
    .cvm-section { margin-bottom: 8px; padding-bottom: 8px; }
    .cvm-presets { padding: 0 0 10px; }
    .cvm-section-head { margin-bottom: 6px; }
    .cvm-section-head small,
    .cvm-setting-row > span > small,
    .cvm-toggle-row small,
    .cvm-disclosure > summary > small { display: none; }
    .cvm-setting-row {
        grid-template-columns: minmax(88px, .72fr) minmax(0, 1.28fr);
        gap: 7px;
        min-height: 38px;
        padding: 5px 0;
    }
    .cvm-choice--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cvm-choice span { min-height: 25px; padding: 3px 4px; }
    .cvm-toggle-row { min-height: 38px; padding: 5px 0; }
    .cvm-disclosure > summary { min-height: 38px; }
    .cvm-range-grid { grid-template-columns: 1fr; gap: 8px; }
    .cvm-preview { position: static; padding: 12px 0 0; }
    .cvm-preview-head { margin-bottom: 0; }
    .cvm-preview[open] .cvm-preview-head { margin-bottom: 8px; }
    .cvm-preview-stage { max-height: 52vh; padding: 7px; }
    .cvm-actions {
        padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    }
    .cvm-actions > span {
        display: none;
    }
    .cvm-actions .btn {
        width: 100%;
    }
}

/* Главный ряд Ленты немного крупнее вложенных фильтров: это частые действия,
   а не служебные поля. Период внутри раскрытия остаётся компактным. */
.feed-search > .input.input-sm {
    height: 36px;
    padding: 6px 11px 6px 36px;
    font-size: var(--type-ui);
}
.feed-age > .feed-age-select.select-sm {
    height: 32px;
    padding: 5px 28px 5px 32px;
    font-size: var(--type-ui);
}
.feed-control-toolbar .feed-density--layout { height: 36px; }

/* ============================================================
   Admin UI Kit — live catalogue rendered with production styles
   ============================================================ */
.ui-kit {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 48px;
}
.ui-kit code {
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
}
.ui-kit-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 92% 10%, var(--accent-soft), transparent 36%),
        var(--bg-1);
    box-shadow: var(--shadow-card);
}
.ui-kit-eyebrow {
    margin-bottom: 4px;
    color: var(--accent);
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ui-kit-title {
    margin: 0;
    color: var(--text);
    font-size: var(--type-title);
    font-weight: 600;
    letter-spacing: -.015em;
}
.ui-kit-lead {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--text-dim);
    font-size: var(--type-body);
    line-height: 1.55;
}
.ui-kit-metrics {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    margin: 0;
}
.ui-kit-audit-note { margin: 0; }
.ui-kit-nav {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    min-width: 0;
    gap: 4px;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-1) 94%, transparent);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px);
    scrollbar-width: thin;
}
.ui-kit-nav a {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 6px 9px;
    border-radius: 7px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}
.ui-kit-nav a:hover,
.ui-kit-nav a:focus-visible {
    background: var(--bg-2);
    color: var(--text);
}
.ui-kit-section {
    scroll-margin-top: 58px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-1);
    box-shadow: var(--shadow-card);
}
.ui-kit-section-title {
    margin: 0;
    color: var(--text);
    font-size: var(--type-section);
    font-weight: 600;
    letter-spacing: -.01em;
}
.ui-kit-section-copy {
    margin: 3px 0 0;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.ui-kit-subsection + .ui-kit-subsection { margin-top: 18px; }
.ui-kit-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}
.ui-kit-swatch {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--bg-2);
}
.ui-kit-swatch__sample {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    border-radius: 8px;
    background: var(--ui-kit-swatch);
}
.ui-kit-swatch > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.ui-kit-swatch__values {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 3px;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    line-height: 1.35;
}
.ui-kit-swatch__values strong {
    color: var(--text-dim);
    font-weight: 500;
}
.ui-kit-swatch b {
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-kit-token-note {
    margin: 9px 0 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.5;
}
.ui-kit-font-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ui-kit-font-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-2);
}
.ui-kit-font-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-mute);
    font-family: var(--font-sans);
    font-size: var(--type-2xs);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.ui-kit-font-card__sample {
    margin-top: 12px;
    color: var(--text);
    font-size: var(--type-lg);
    line-height: 1.35;
}
.ui-kit-font-card p {
    margin: 8px 0 0;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: var(--type-xs);
    line-height: 1.45;
}
.ui-kit-font-card__stack {
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    line-height: 1.4;
}
.ui-kit-type-list {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.ui-kit-type-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 56px;
    align-items: baseline;
    gap: 12px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-soft);
}
.ui-kit-type-row:last-child { border-bottom: 0; }
.ui-kit-type { color: var(--text); }
.ui-kit-type--2xs { font-size: var(--type-2xs); }
.ui-kit-type--xs { font-size: var(--type-xs); }
.ui-kit-type--sm { font-size: var(--type-sm); }
.ui-kit-type--ui { font-size: var(--type-ui); }
.ui-kit-type--body { font-size: var(--type-body); }
.ui-kit-type--md { font-size: var(--type-md); }
.ui-kit-type--lg { font-size: var(--type-lg); }
.ui-kit-type--section { font-size: var(--type-section); }
.ui-kit-type--title { font-size: var(--type-title); }
.ui-kit-type--page { font-size: var(--type-page); }
.ui-kit-type--display { font-size: var(--type-display); }
.ui-kit-type--brand { font-size: var(--type-brand); }
.ui-kit-type-size {
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    text-align: right;
}
.ui-kit-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ui-kit-demo {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-0);
}
.ui-kit-demo--stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ui-kit-demo--popover { min-height: 156px; }
.ui-kit-structure-demo { margin-top: 10px; }
.ui-kit-structure-demo .page-header { margin-bottom: 12px; }
.ui-kit-structure-demo .page-title { font-size: var(--type-title); }
.ui-kit-structure-demo .filter-bar { margin-bottom: 0; }
.ui-kit-demo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text);
    font-size: var(--type-body);
}
.ui-kit-demo__head b { font-weight: 600; }
.ui-kit-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ui-kit-mini-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}
.ui-kit-table-demo { margin-top: 10px; }
.ui-kit-dropdown-stage { max-width: 340px; }
.ui-kit-dropdown-stage .dropdown-panel {
    position: static;
    max-height: none;
    margin-top: 4px;
}
.ui-kit-toast-preview .toast {
    position: static;
    align-items: stretch;
    pointer-events: auto;
}
.ui-kit-toast-preview .toast-item { width: 100%; }
.ui-kit-selection-preview {
    position: relative;
    min-height: 62px;
    overflow: hidden;
    border: 1px dashed var(--border);
    border-radius: 9px;
    background: var(--bg-0);
}
.ui-kit-selection-preview .sel-bar {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    transform: none;
}
.ui-kit-domain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.ui-kit-domain-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    box-shadow: var(--shadow-card);
}
.ui-kit-domain-card h4 {
    margin: 7px 0 5px;
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
    line-height: 1.35;
}
.ui-kit-domain-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.5;
}
.ui-kit-card-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.ui-kit-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 7px;
}
.ui-kit-icon {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-2);
}
.ui-kit-icon code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-kit-registry-table td:nth-child(1) { color: var(--text-mute); }
.ui-kit-partial-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 8px;
}
.ui-kit-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ui-kit-file-list code {
    padding: 3px 6px;
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    background: var(--bg-2);
}

@media (max-width: 1100px) {
    .ui-kit-metrics { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
    .ui-kit-font-grid { grid-template-columns: 1fr; }
    .ui-kit-domain-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ui-kit { gap: 12px; }
    .ui-kit-hero { flex-direction: column; padding: 14px; }
    .ui-kit-hero > .action-row { width: 100%; }
    .ui-kit-hero > .action-row .btn { flex: 1 1 auto; }
    .ui-kit-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-kit-section { padding: 13px; }
    .ui-kit-demo-grid,
    .ui-kit-form-grid,
    .ui-kit-partial-groups { grid-template-columns: 1fr; }
    .ui-kit-swatches { grid-template-columns: 1fr; }
    .ui-kit-type-row { grid-template-columns: 94px minmax(0, 1fr); }
    .ui-kit-type-size { display: none; }
    .ui-kit-mini-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-kit-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Единая карточка события простого пользовательского слоя ─────────── */
.user-event-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-card);
    transition: border-color .14s ease, background .14s ease;
}
.user-event-card:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}
.user-event-card.is-new {
    border-left: 3px solid var(--accent);
}
.user-event-card__toggle {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 12px 13px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.user-event-card__toggle:hover,
.user-event-card__toggle:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
    outline: none;
}
.user-event-card__topline,
.user-event-card__footer,
.user-event-card__places,
.user-event-card__open {
    display: flex;
    min-width: 0;
    align-items: center;
}
.user-event-card__topline { gap: 7px; }
.user-event-card__kind {
    min-width: 0;
    overflow: hidden;
    color: var(--accent);
    font-size: var(--type-xs);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-event-card__new {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--type-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.user-event-card__time {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.user-event-card__title {
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
    line-height: 1.34;
}
.user-event-card.is-lead .user-event-card__title {
    font-size: var(--type-lg);
}
.user-event-card__summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--type-ui);
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.user-event-card.is-compact .user-event-card__summary {
    -webkit-line-clamp: 3;
}
.user-event-card__match {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: baseline;
    color: var(--accent);
    font-size: var(--type-xs);
    font-weight: 600;
}
.user-event-card__match small {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
}
.user-event-card__match.is-broad { color: var(--text-mute); }
.user-event-card__match.is-direct { color: var(--success); }
.user-event-card__footer {
    flex-wrap: wrap;
    gap: 7px 10px;
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.user-event-card__places { flex-wrap: wrap; gap: 5px; }
.user-event-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.user-event-card__round-action {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    padding: 0;
    color: var(--text-mute);
    background: var(--bg-1);
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.user-event-card__round-action:hover,
.user-event-card__round-action:focus-visible {
    border-color: var(--accent-border);
    color: var(--accent);
    outline: none;
}
.user-event-card__open {
    color: var(--text-dim);
}
.user-event-card__open svg { transition: transform .14s ease; }
.user-event-card__open .is-open svg { transform: rotate(180deg); }
.user-event-card__expanded {
    display: block;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--bg-0) 48%, var(--bg-1));
}
.user-event-card__expanded[hidden] { display: none !important; }
.user-event-card__block { padding-top: 10px; }
.user-event-card__label {
    margin-bottom: 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .055em;
}
.user-event-card__block p,
.user-event-card__block ul {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--type-ui);
    line-height: 1.55;
}
.user-event-card__block ul { padding-left: 18px; }
.user-event-card__block li + li { margin-top: 4px; }
.user-event-card__empty,
.user-event-card__original {
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.45;
}
.user-event-detail-slot:empty {
    min-height: 34px;
}
.user-event-detail-status {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    text-align: center;
}
.user-event-detail-status.is-error {
    color: var(--danger);
}
@media (max-width: 620px) {
    .user-event-card__toggle { padding: 11px; }
    .user-event-card.is-lead .user-event-card__title,
    .user-event-card__title { font-size: var(--type-md); }
    .user-event-card__expanded { padding: 13px 11px 15px; }
    .user-event-card__round-action { width: 40px; height: 40px; flex-basis: 40px; }
}

/* ── Ordinary editor: «Сводка» ─────────────────────────────────────── */
.briefing-editor {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.briefing-editor__header {
    padding: 2px 0 17px;
    border-bottom: 1px solid var(--border-soft);
}
.briefing-editor__headline-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.briefing-editor__headline-copy { flex: 1; min-width: 0; }
.briefing-editor__headline-copy .event-card-title { margin: 0 0 8px; }
.briefing-editor__headline-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.briefing-status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    white-space: nowrap;
}
.briefing-status-label[data-status="ready"] { color: var(--success); }
.briefing-status-label[data-status="ai_pending"] { color: var(--text-dim); }
.briefing-event-materials { width: 40px; height: 40px; flex-basis: 40px; }
.briefing-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    align-items: center;
    margin-top: 11px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.briefing-event-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.briefing-draft {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.briefing-draft__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}
.briefing-draft__bar .section-heading { margin: 0; }
.briefing-draft__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.briefing-headline-field { margin-bottom: 10px; }
.briefing-body { width: 100%; min-height: 380px; resize: vertical; line-height: 1.62; }
.briefing-rewrite {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}
.briefing-rewrite > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.briefing-rewrite > summary::-webkit-details-marker { display: none; }
.briefing-rewrite > summary:hover { color: var(--text); }
.briefing-rewrite__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 9px;
}
.briefing-rewrite__body .textarea { width: 100%; }
.briefing-media-section,
.briefing-evidence {
    min-width: 0;
    padding-top: 17px;
    border-top: 1px solid var(--border-soft);
}
.briefing-section-heading,
.briefing-evidence > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 600;
}
.briefing-section-heading > span:last-child,
.briefing-evidence > summary > span:last-child {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
}
.briefing-media {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    margin-top: 10px;
    padding: 1px 1px 7px;
    scroll-snap-type: x proximity;
}
.briefing-media__item {
    position: relative;
    flex: 0 0 172px;
    height: 112px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    scroll-snap-align: start;
}
.briefing-media__item.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.briefing-media__preview { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.briefing-media__preview:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.briefing-media__preview:disabled { cursor: default; }
.briefing-media__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.briefing-media__select { position: absolute; right: 6px; top: 6px; }
.briefing-media__retry { position: absolute; right: 6px; bottom: 6px; }
.briefing-evidence > summary {
    min-height: 34px;
    cursor: pointer;
    list-style: none;
}
.briefing-evidence > summary::-webkit-details-marker { display: none; }
.briefing-evidence__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
}
.briefing-evidence__body .editorial-section-heading { margin-bottom: 9px; }
.briefing-editor__footer {
    position: sticky;
    bottom: -1px;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    padding: 11px 0 3px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-1);
}
.briefing-status-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.briefing-more-actions { position: relative; margin-left: auto; }
.briefing-more-actions > summary {
    width: 40px;
    height: 40px;
    list-style: none;
}
.briefing-more-actions > summary::-webkit-details-marker { display: none; }
.briefing-more-actions__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: min(360px, calc(100vw - 42px));
    max-height: min(560px, 72vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
}
.briefing-more-actions__title {
    padding: 6px 9px 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.briefing-more-actions__panel > form { display: contents; }
.briefing-more-actions__panel .briefing-rewrite {
    margin-top: 4px;
    padding-top: 4px;
}
.briefing-more-actions__panel .briefing-rewrite > summary {
    width: 100%;
    min-height: 36px;
    padding: 6px 9px;
    font-size: var(--type-xs);
}
.briefing-more-actions__panel .briefing-rewrite__body { padding: 0 9px 7px; }
.briefing-menu-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 8px 9px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: var(--type-sm);
    text-align: left;
    cursor: pointer;
}
.briefing-menu-action:hover { background: var(--bg-2); color: var(--text); }
.briefing-menu-action:disabled { opacity: .45; cursor: default; }
.briefing-history,
.briefing-technical { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; }
.briefing-history > summary,
.briefing-technical > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 9px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    cursor: pointer;
    list-style: none;
}
.briefing-history > summary::-webkit-details-marker,
.briefing-technical > summary::-webkit-details-marker { display: none; }
.briefing-history__list { max-height: 260px; overflow-y: auto; padding: 0 4px 4px; }
.briefing-history__list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 5px; border-bottom: 1px solid var(--border-soft); font-size: var(--type-xs); }
.briefing-history__list > div:last-child { border-bottom: 0; }
.briefing-history__list small { color: var(--text-mute); }
.briefing-technical dl { display: grid; gap: 5px; margin: 3px 9px 7px; font-size: var(--type-xs); }
.briefing-technical dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
.briefing-technical dt { color: var(--text-mute); }
.briefing-technical dd { min-width: 0; margin: 0; color: var(--text-dim); overflow-wrap: anywhere; }

@media (max-width: 780px) {
    .briefing-editor { gap: 17px; }
    .briefing-editor__headline-row,
    .briefing-draft__bar { align-items: stretch; flex-direction: column; }
    .briefing-editor__headline-actions { justify-content: space-between; }
    .briefing-draft__actions { flex-wrap: wrap; }
    .briefing-draft__actions .btn { flex: 1 1 auto; }
    .briefing-body { min-height: 300px; }
    .briefing-media__item { flex-basis: 154px; height: 104px; }
    .briefing-editor__footer { padding-bottom: 5px; }
}

/* Простой пользовательский обзор по регионам. */
.user-regions__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.user-period-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-1);
}
.user-period-switch__item {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--text-dim);
    font-size: var(--type-ui);
    font-weight: 600;
    text-decoration: none;
}
.user-period-switch__item:hover { color: var(--text); background: var(--bg-2); }
.user-period-switch__item.is-active {
    color: var(--accent);
    background: var(--accent-soft);
}
.user-regions__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--text-dim);
    font-size: var(--type-ui);
}
.user-regions__summary > span:first-child { color: var(--accent); line-height: 0; }
.user-regions__summary b { color: var(--text); font-weight: 600; }
.user-regions__summary-sep { color: var(--text-mute); }
.user-region-dynamics {
    padding: 11px 12px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.user-region-dynamics__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.user-region-dynamics__head h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 600;
}
.user-region-dynamics__head > span { color: var(--text-mute); font-size: var(--type-xs); }
.user-region-dynamics__list { display: flex; flex-wrap: wrap; gap: 6px; }
.user-region-trend {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-dim);
    background: var(--bg-2);
    font-size: var(--type-xs);
}
.user-region-trend b { color: var(--text); font-variant-numeric: tabular-nums; }
.user-region-trend small { color: var(--text-mute); }
.user-region-trend.is-rising small,
.user-region-trend.is-new small { color: var(--success); }
.user-region-trend.is-fading small { color: var(--warn); }
.user-regions { display: grid; gap: 18px; }
.user-region-section {
    display: block;
    padding-top: 2px;
}
.user-region-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
    list-style: none;
}
.user-region-section__head::-webkit-details-marker { display: none; }
.user-region-section__head > span:first-child,
.user-region-section__toggle { min-width: 0; }
.user-region-section__toggle {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    margin: -3px;
    padding: 3px;
    border: 0;
    border-radius: 6px;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.user-region-section__toggle:hover { background: var(--bg-hover); }
.user-region-section__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-region-section__toggle-mark {
    flex: 0 0 auto;
    color: var(--text-mute);
    transition: transform .14s ease;
}
.user-region-section__toggle[aria-expanded="false"] .user-region-section__toggle-mark {
    transform: rotate(-90deg);
}
.user-region-section__head strong {
    display: block;
    color: var(--text);
    font-size: var(--type-lg);
    font-weight: 600;
}
.user-region-section__head small {
    display: block;
    margin-top: 2px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
}
.user-region-section__meta { display: flex; align-items: center; gap: 7px; }
.user-region-section__meta em {
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-style: normal;
    white-space: nowrap;
}
.user-region-section__meta em.is-rising { color: var(--success); }
.user-region-section__meta em.is-fading { color: var(--warn); }
.user-region-events {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.user-region-section__more { margin-top: 8px; }
.user-region-section__remaining {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.user-region-section.is-secondary {
    padding: 9px 11px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.user-region-section.is-secondary > summary { cursor: pointer; margin: 0; border: 0; padding: 0; }
.user-region-section.is-secondary[open] > summary { margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
@media (max-width: 760px) {
    .user-regions__header { align-items: flex-end; }
    .user-region-events { grid-template-columns: 1fr; }
    .user-region-dynamics__head { display: block; }
    .user-region-dynamics__head > span { display: block; margin-top: 2px; }
    .user-region-dynamics__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
    }
    .user-region-trend { flex: 0 0 auto; }
    .user-region-section__meta em { display: none; }
}
@media (max-width: 480px) {
    .user-regions__header { display: block; }
    .user-regions__header .btn { margin-top: 8px; }
    .user-period-switch { display: flex; width: 100%; }
    .user-period-switch__item { flex: 1; padding-inline: 6px; }
    .user-regions__summary-sep { display: none; }
    .user-regions__summary span { flex-basis: auto; }
    .user-region-section__head strong { font-size: var(--type-md); }
}

.gm-user-toolbar { align-items: flex-end; }
.gm-user-category-field { min-width: 220px; }
.gm-user-category-field .select { width: 100%; }
#gm-map { background: var(--bg-2); }
@media (max-width: 620px) {
    .gm-user-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
        gap: 8px;
    }
    .gm-user-toolbar .filter-field,
    .gm-user-category-field { min-width: 0; }
    .gm-user-toolbar .filter-actions {
        grid-column: 1 / -1;
        align-self: end;
    }
    .gm-user-toolbar .filter-actions .btn { width: 100%; }
    .gm-user-toolbar + #gm-stage {
        height: calc(100svh - 320px) !important;
        min-height: 410px !important;
        max-height: 510px;
    }
}

/* Read-only details for the simple user contour.  The editor keeps the
   feature-dense feed_details layout; this view is intentionally about reading. */
.public-event-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--text);
}
.public-event-detail.is-inline {
    gap: 16px;
}
.public-event-detail.is-inline .public-event-detail__intro { order: 1; }
.public-event-detail.is-inline .public-event-detail__context { order: 2; }
.public-event-detail.is-inline .public-event-detail__hero,
.public-event-detail.is-inline .detail-video-section { order: 3; }
.public-event-detail.is-inline .public-event-detail__section { order: 4; }
.public-event-detail.is-inline .public-event-detail__sources { order: 5; }
.public-event-detail.is-inline .public-event-detail__intro p {
    color: var(--text);
    font-size: var(--type-ui);
    line-height: 1.62;
    white-space: pre-line;
}
.public-event-detail__header-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.public-event-detail__hero {
    width: 100%;
    height: clamp(190px, 32vw, 340px);
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    cursor: zoom-in;
}
.public-event-detail__hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detail-video-section {
    display: grid;
    gap: 9px;
    width: 100%;
}
.detail-video-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(68vh, 620px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #090b10;
    object-fit: contain;
}
.detail-video-embed {
    min-height: 220px;
}
.detail-video-more {
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--bg-1);
}
.detail-video-more > summary {
    padding: 8px 11px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    cursor: pointer;
}
.detail-video-more__list {
    display: grid;
    gap: 9px;
    padding: 0 9px 9px;
}
.material-video-list {
    margin-top: 9px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-2) 82%, transparent);
}
.material-video-list > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 9px;
    list-style: none;
    color: var(--text-dim);
    font-size: var(--type-xs);
    cursor: pointer;
}
.material-video-list > summary::-webkit-details-marker { display: none; }
.material-video-list__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.material-video-list__count {
    min-width: 20px;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    text-align: center;
    font-family: var(--font-mono);
}
.material-video-list__body {
    display: grid;
    gap: 9px;
    padding: 8px;
    border-top: 1px solid var(--border-soft);
}
.material-video-list__entry {
    display: grid;
    gap: 5px;
    margin: 0;
}
.material-video-list__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(56vh, 500px);
    border: 0;
    border-radius: 7px;
    background: #090b10;
    object-fit: contain;
}
.material-video-list__entry figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.material-video-list__entry.is-unavailable::after {
    content: "Видео временно недоступно";
    padding: 8px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.material-video-list__entry.is-unavailable .material-video-list__player { display: none; }
.public-event-detail__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.public-event-detail__eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.public-event-detail__intro h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-title);
    font-weight: 600;
    line-height: 1.28;
}
.public-event-detail__intro p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--type-body);
    line-height: 1.58;
}
.public-event-detail__original,
.public-event-detail__more {
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.45;
}
.public-event-detail__context {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.public-event-detail__section,
.public-event-detail__sources {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.public-event-detail__section { padding: 13px 14px; }
.public-event-detail__section h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: var(--text);
    font-size: var(--type-body);
    font-weight: 600;
}
.public-event-detail__facts ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.public-event-detail__facts li {
    position: relative;
    padding-left: 15px;
    color: var(--text);
    font-size: var(--type-ui);
    line-height: 1.55;
}
.public-event-detail__facts li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .66em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.public-event-detail__sources > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--text-dim);
    font-size: var(--type-ui);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.public-event-detail__sources > summary::-webkit-details-marker { display: none; }
.public-event-detail__sources > summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.public-event-detail__sources > summary > span:last-child {
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}
.public-event-detail__sources[open] > summary { border-bottom: 1px solid var(--border-soft); }
.public-event-detail__source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}
.public-event-source {
    padding: 10px 11px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--bg-2);
}
.public-event-source__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.public-event-source__meta > span:first-child { color: var(--text-dim); font-weight: 600; }
.public-event-source__meta a {
    display: inline-flex;
    margin-left: auto;
    color: var(--text-mute);
}
.public-event-source__meta a:hover { color: var(--accent); }
.public-event-source h4 {
    margin: 7px 0 0;
    color: var(--text);
    font-size: var(--type-ui);
    font-weight: 600;
    line-height: 1.4;
}
.public-event-source > p,
.public-event-source__text > p,
.public-event-source__full p {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.55;
}
.public-event-source__text { display: grid; }
.public-event-source__full {
    padding-top: 1px;
}
.public-event-source__toggle {
    justify-self: start;
    margin-top: 7px;
    padding: 0;
    border: 0;
    color: var(--accent);
    background: transparent;
    font: inherit;
    font-size: var(--type-xs);
    cursor: pointer;
}
.public-event-source__toggle:hover { color: var(--text); }
.public-event-source__media {
    display: flex;
    gap: 6px;
    margin-top: 9px;
    overflow-x: auto;
}
.public-event-source__media button {
    flex: 0 0 104px;
    height: 70px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: var(--bg-3);
    cursor: zoom-in;
}
.public-event-source__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.public-event-detail__sources > .public-event-detail__more { padding: 0 12px 10px; }
.public-event-detail__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}
@media (max-width: 620px) {
    .public-event-detail { gap: 12px; }
    .public-event-detail__hero { height: min(56vw, 240px); }
    .public-event-detail__intro h2 { font-size: var(--type-lg); }
    .public-event-detail__section { padding: 11px; }
    .public-event-detail__source-list { padding: 8px; }
    .public-event-detail__actions .btn { width: 100%; justify-content: center; }
}

/* ── Сводка: сборка выпуска ─────────────────────────────────────────────── */
.briefing-workspace-toolbar {
    max-width: 1440px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.briefing-issues-page,
.briefing-issue-page {
    width: min(1440px, 100%);
    margin-inline: auto;
}
.briefing-issues-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}
.briefing-issues-head h1,
.briefing-issue-builder__head h1 {
    margin: 8px 0 3px;
    font-size: var(--type-page);
    line-height: 1.15;
    font-weight: 600;
}
.briefing-issue-builder__head p { margin: 0; color: var(--text-dim); }
.briefing-issue-builder__warning,
.briefing-issue-row__warning { color: var(--warn); }
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    text-decoration: none;
}
.back-link:hover { color: var(--text); }
.briefing-issue-create { flex: 0 0 auto; }
.briefing-issue-create[open] { flex-basis: 100%; }
.briefing-issue-create > summary {
    width: fit-content;
    margin-left: auto;
    list-style: none;
    cursor: pointer;
}
.briefing-issue-create > summary::-webkit-details-marker { display: none; }
.briefing-issue-create__form {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(160px, .75fr) minmax(185px, .9fr) minmax(185px, .9fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 14px;
    padding: 16px 0 20px;
    border-block: 1px solid var(--border-soft);
}
.briefing-issue-create__form .field { min-width: 0; }
.briefing-issue-list__rows { border-bottom: 1px solid var(--border-soft); }
.briefing-issue-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-width: 0;
    padding: 16px 2px;
    border-top: 1px solid var(--border-soft);
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}
.briefing-issue-row:hover { background: var(--bg-hover); }
.briefing-issue-row__body { min-width: 0; }
.briefing-issue-row h2 {
    margin: 0 0 5px;
    font-size: var(--type-md);
    line-height: 1.25;
    font-weight: 600;
}
.briefing-issue-row__period { color: var(--text-dim); font-size: var(--type-xs); }
.briefing-issue-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.briefing-issues-empty { padding-block: 28px; }
.briefing-issue-builder { margin-top: 10px; }
.briefing-issue-builder__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}
.briefing-issue-builder__title { min-width: 0; }
.briefing-issue-builder__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.briefing-issue-builder__actions .is-disabled { opacity: .45; pointer-events: none; }
.briefing-issue-settings { position: relative; }
.briefing-issue-settings > summary {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    list-style: none;
    cursor: pointer;
}
.briefing-issue-settings > summary::-webkit-details-marker { display: none; }
.briefing-issue-settings > form {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    width: min(900px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(160px, .75fr) minmax(185px, .9fr) minmax(185px, .9fr) auto;
    align-items: end;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
}
.briefing-builder-grid {
    display: grid;
    grid-template-columns: minmax(320px, .82fr) minmax(430px, 1.18fr);
    align-items: start;
    gap: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}
.briefing-issue-candidates,
.briefing-selected-materials { min-width: 0; }
.briefing-issue-candidates {
    padding-right: 28px;
    border-right: 1px solid var(--border-soft);
}
.briefing-builder-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}
.briefing-builder-count { color: var(--text-mute); font-size: var(--type-sm); }
.briefing-candidate-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(155px, auto);
    gap: 8px;
    margin-bottom: 9px;
}
.briefing-candidate-filters .search-field {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--text-mute);
}
.briefing-candidate-filters .search-field:focus-within { border-color: var(--accent-border); }
.briefing-candidate-filters .search-field input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}
.briefing-candidate-list {
    max-height: min(58vh, 660px);
    overflow-y: auto;
    padding-right: 3px;
    border-top: 1px solid var(--border-soft);
}
.briefing-candidate {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background .15s ease;
}
.briefing-candidate:hover { background: var(--bg-hover); }
.briefing-candidate input { margin-top: 3px; }
.briefing-candidate__body { min-width: 0; display: grid; gap: 3px; }
.briefing-candidate__body strong { font-size: var(--type-sm); line-height: 1.3; }
.briefing-candidate__body > span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--type-xs);
    line-height: 1.35;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.briefing-candidate__warnings { display: flex; flex-wrap: wrap; gap: 8px; }
.briefing-candidate__warnings b { color: var(--warn); font-weight: 500; }
.briefing-candidate-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}
.briefing-candidate-empty,
.briefing-selected-empty {
    padding: 24px 14px;
    color: var(--text-dim);
    text-align: center;
    font-size: var(--type-sm);
}
.briefing-selected-list { border-top: 1px solid var(--border-soft); }
.briefing-selected-item {
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-soft);
}
.briefing-selected-item__top {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}
.briefing-selected-item__number {
    width: 26px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
}
.briefing-selected-item__details { min-width: 0; }
.briefing-selected-item__details > summary {
    min-height: 36px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    list-style: none;
    cursor: pointer;
}
.briefing-selected-item__details > summary::-webkit-details-marker { display: none; }
.briefing-selected-item__title { min-width: 0; display: grid; gap: 5px; }
.briefing-selected-item__title strong { font-size: var(--type-sm); line-height: 1.3; }
.briefing-selected-item__warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--warn);
    font-size: var(--type-xs);
    font-weight: 500;
}
.briefing-selected-item__chevron,
.briefing-document-preview__chevron {
    flex: 0 0 auto;
    color: var(--text-mute);
    transition: transform .15s ease;
}
.briefing-selected-item__details[open] .briefing-selected-item__chevron,
.briefing-document-preview[open] .briefing-document-preview__chevron { transform: rotate(180deg); }
.briefing-selected-item__buttons { display: flex; gap: 2px; }
.briefing-selected-item__buttons form { display: contents; }
.briefing-selected-item__buttons .btn-icon,
.briefing-selected-item__section .btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
}
.briefing-selected-item__body {
    padding: 5px 26px 2px 0;
}
.briefing-selected-item__body > p {
    margin: 0;
    color: var(--text-dim);
    font-size: var(--type-xs);
    line-height: 1.4;
}
.briefing-selected-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.briefing-selected-item__notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin: 8px 0 0 36px;
    color: var(--warn);
    font-size: var(--type-xs);
}
.briefing-selected-item__section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 5px;
    margin-top: 12px;
}
.briefing-selected-item__section .field__label { font-size: var(--type-2xs); }
.briefing-document-preview {
    margin-top: 28px;
    border-block: 1px solid var(--border-soft);
}
.briefing-document-preview > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px;
    cursor: pointer;
    list-style: none;
}
.briefing-document-preview > summary::-webkit-details-marker { display: none; }
.briefing-document-preview > summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.briefing-document-preview[open] > summary { border-bottom: 1px solid var(--border-soft); }
.briefing-document-sheet {
    width: min(760px, calc(100% - 24px));
    margin: 12px auto 18px;
    padding: clamp(22px, 5vw, 54px);
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    background: #fff;
    color: #1d2430;
}
.briefing-document-sheet header { padding-bottom: 14px; border-bottom: 1px solid #dce2e8; }
.briefing-document-sheet header small { color: #667085; letter-spacing: .08em; }
.briefing-document-sheet h2 { margin: 8px 0 4px; color: #2e74b5; font-size: var(--type-title); }
.briefing-document-sheet header p { margin: 0; color: #667085; font-size: var(--type-sm); }
.briefing-document-sheet article { margin-top: 20px; }
.briefing-document-sheet article h3,
.briefing-document-sheet .briefing-document-section { color: #2e74b5; }
.briefing-document-sheet article h3 { margin: 0 0 7px; font-size: var(--type-lg); }
.briefing-document-sheet article > div { white-space: pre-line; font-size: var(--type-md); line-height: 1.55; }
.briefing-document-sheet .briefing-document-section { margin: 24px 0 0; font-size: var(--type-section); }
.briefing-document-sources { margin: 9px 0 0; padding-left: 22px; font-size: var(--type-sm); }
.briefing-document-sources a { color: #2e74b5; }

@media (max-width: 1120px) {
    .briefing-issue-create__form {
        grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(155px, .7fr));
    }
    .briefing-issue-create__form > .btn { grid-column: -2 / -1; justify-self: end; }
    .briefing-issue-settings > form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .briefing-issue-settings > form .briefing-issue-title-field { grid-column: 1 / -1; }
    .briefing-issue-settings > form > .btn { justify-self: end; }
}
@media (max-width: 900px) {
    .briefing-builder-grid { grid-template-columns: 1fr; }
    .briefing-issue-candidates {
        padding: 0 0 24px;
        border-right: 0;
        border-bottom: 1px solid var(--border-soft);
    }
    .briefing-candidate-list { max-height: 420px; }
    .briefing-issue-create__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .briefing-issue-title-field { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .briefing-workspace-toolbar,
    .briefing-issue-builder__head { align-items: stretch; flex-direction: column; }
    .briefing-workspace-toolbar .btn { width: 100%; justify-content: center; }
    .briefing-issue-create__form { grid-template-columns: 1fr; }
    .briefing-issue-create__form > .btn { grid-column: auto; width: 100%; justify-content: center; }
    .briefing-issue-row { grid-template-columns: 1fr; gap: 8px; }
    .briefing-issue-row__meta { justify-content: flex-start; }
    .briefing-issue-builder__actions { width: 100%; }
    .briefing-issue-builder__actions > .btn { flex: 1; justify-content: center; }
    .briefing-issue-settings { position: static; }
    .briefing-issue-settings > form {
        right: 0;
        left: 0;
        width: auto;
        grid-template-columns: 1fr;
    }
    .briefing-issue-settings > form > .btn { width: 100%; justify-content: center; }
    .briefing-candidate-filters { grid-template-columns: 1fr; }
    .briefing-selected-item__top { grid-template-columns: 26px minmax(0, 1fr); }
    .briefing-selected-item__buttons { grid-column: 2; justify-content: flex-end; }
    .briefing-selected-item__notice { margin-left: 36px; }
    .briefing-selected-item__notice { align-items: stretch; flex-direction: column; }
    .briefing-document-sheet { padding: 20px; }
}

/* ============================================================
   Техпанель · теневой контур оперативной структуры
   ============================================================ */
.os-shadow { display: grid; gap: 12px; }
.os-shadow__intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 16px;
    background: linear-gradient(135deg, var(--bg-1), var(--info-soft));
}
.os-shadow__intro-copy { min-width: 0; max-width: 780px; }
.os-shadow__eyebrow {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 5px;
    color: var(--info); font-size: var(--type-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.os-shadow__intro h2 { margin: 0; font-size: var(--type-section); }
.os-shadow__intro p {
    margin: 5px 0 0;
    color: var(--text-dim); font-size: var(--type-ui); line-height: 1.5;
}
.os-shadow__run {
    flex: 0 0 auto;
    display: grid; justify-items: end; gap: 4px;
    color: var(--text-dim); font-size: var(--type-sm);
}
.os-shadow__run small { color: var(--text-mute); }
.os-shadow__metrics { margin-bottom: 0; }
.os2-gate { display: grid; gap: 10px; }
.os2-gate__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.os2-gate__head h3 {
    display: flex; align-items: center; gap: 6px;
    margin: 0; font-size: var(--type-md);
}
.os2-gate__head p {
    max-width: 850px; margin: 3px 0 0;
    color: var(--text-mute); font-size: var(--type-sm); line-height: 1.4;
}
.os2-gate__summary {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
}
.os2-gate__summary > div {
    min-width: 0; display: grid; gap: 2px;
    padding: 8px 9px; border: 1px solid var(--border-soft);
    border-radius: 8px; background: var(--bg-2);
}
.os2-gate__summary small {
    color: var(--text-mute); font-size: var(--type-2xs);
    text-transform: uppercase; letter-spacing: .04em;
}
.os2-gate__summary b { color: var(--text); font-size: var(--type-sm); }
.os2-gate__routes {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px;
}
.os2-gate__route {
    min-width: 0; display: grid; gap: 5px;
    padding: 7px 8px; border: 1px solid var(--border-soft); border-radius: 8px;
}
.os2-gate__route > div:first-child {
    display: flex; justify-content: space-between; gap: 7px;
    color: var(--text-mute); font-size: var(--type-2xs); line-height: 1.25;
}
.os2-gate__route b { flex-shrink: 0; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.os2-gate__route .progress-bar { display: block; }
.os2-gate__guard {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 0; color: var(--text-dim); font-size: var(--type-sm); line-height: 1.4;
}
.os2-gate__guard .lucide { flex: 0 0 auto; margin-top: 2px; color: var(--warn); }
.os2-gate__details { margin-top: -2px; }
.os2-gate__details p { margin: 0; color: var(--text-dim); font-size: var(--type-sm); line-height: 1.42; }
.os2-gate__details small { display: block; margin-top: 7px; color: var(--text-mute); font-size: var(--type-xs); }
.os2-leaf-review-shell { display: grid; gap: 12px; margin-bottom: 12px; }
.os2-leaf-review-shell__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.os2-leaf-review-shell__head h3 { margin: 0; font-size: var(--type-md); }
.os2-leaf-review-shell__head p {
    max-width: 850px; margin: 4px 0 0;
    color: var(--text-mute); font-size: var(--type-sm); line-height: 1.42;
}
.os2-leaf-review { display: grid; gap: 10px; }
.os2-leaf-review__metrics { margin: 0; }
.os2-leaf-review__filters { margin: 0; align-items: end; }
.os2-leaf-review__filters .filter-field { flex: 0 1 190px; }
.os2-leaf-review__filters .filter-field--grow { flex: 1 1 300px; }
.os2-leaf-review__filters .os2-leaf-review__limit { flex-basis: 105px; }
.os2-leaf-review__result-count {
    display: flex; justify-content: space-between; gap: 12px;
    color: var(--text-dim); font-size: var(--type-sm);
}
.os2-leaf-review__result-count span { color: var(--text-mute); }
.os2-leaf-review__list { display: grid; gap: 10px; }
.os2-leaf-card { display: grid; gap: 10px; padding: 12px 13px; }
.os2-leaf-card--attention { border-color: var(--warn-border); }
.os2-leaf-card__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.os2-leaf-card__heading { min-width: 0; }
.os2-leaf-card__heading h4 { margin: 4px 0 0; font-size: var(--type-md); line-height: 1.3; }
.os2-leaf-card__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px;
    color: var(--text-mute); font-size: var(--type-xs);
}
.os2-leaf-card__source-text {
    margin: 0; color: var(--text-dim); font-size: var(--type-sm); line-height: 1.48;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.os2-leaf-card__decision {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.os2-leaf-card__decision > span {
    min-width: 0; display: grid; gap: 2px;
    padding: 7px 8px; border-radius: 8px; background: var(--bg-2);
}
.os2-leaf-card__decision small,
.os2-leaf__fields small {
    color: var(--text-mute); font-size: var(--type-2xs);
    text-transform: uppercase; letter-spacing: .04em;
}
.os2-leaf-card__decision b { font-size: var(--type-sm); }
.os2-leaf-card__leaves { display: grid; gap: 7px; }
.os2-leaf {
    display: grid; gap: 6px; padding: 9px 10px;
    border: 1px solid var(--border-soft); border-radius: 9px; background: var(--bg-2);
}
.os2-leaf__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.os2-leaf__head > b { min-width: 0; font-size: var(--type-sm); }
.os2-leaf__head > div { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.os2-leaf > p { margin: 0; color: var(--text-dim); font-size: var(--type-sm); line-height: 1.4; }
.os2-leaf__fields { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: var(--type-sm); }
.os2-leaf__fields > span { display: inline-grid; gap: 1px; }
.os2-leaf__evidence { display: grid; gap: 4px; }
.os2-leaf__evidence blockquote {
    margin: 0; padding: 6px 8px; border-left: 2px solid var(--info);
    color: var(--text-dim); background: var(--bg-1); font-size: var(--type-xs); line-height: 1.4;
}
.os2-leaf__warning { color: var(--warn); font-family: var(--font-mono); }
.os2-leaf-card__zero {
    display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px;
    border-radius: 8px; background: var(--bg-2); color: var(--text-dim); font-size: var(--type-sm);
}
.os2-leaf-card__zero span { color: var(--text-mute); }
.os2-leaf-card__runtime { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: var(--type-xs); }
.os2-leaf-card__hints { margin: 8px 0 0; padding-left: 21px; color: var(--text-dim); font-size: var(--type-xs); }
.os2-leaf-card__hints li + li { margin-top: 4px; }
.os2-leaf-review-form {
    display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
.os2-leaf-review-form label { display: grid; align-content: start; gap: 4px; }
.os2-leaf-review-form__actions {
    grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.os2-leaf-review-form__actions small { margin-left: auto; color: var(--text-mute); }
.os-shadow__overview { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 12px; }
.os-shadow__section-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.os-shadow__section-head h3 {
    display: flex; align-items: center; gap: 6px;
    margin: 0; font-size: var(--type-md);
}
.os-shadow__section-head p { margin: 3px 0 0; color: var(--text-mute); font-size: var(--type-sm); line-height: 1.4; }
.os-theatre-list { display: grid; gap: 6px; }
.os-theatre {
    width: 100%; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft); border-radius: 9px;
    background: var(--bg-1); color: var(--text); text-align: left;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.os-theatre:hover, .os-theatre.is-active { border-color: var(--accent-border); background: var(--accent-soft); }
.os-theatre__main { min-width: 0; display: grid; gap: 2px; }
.os-theatre__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-ui); }
.os-theatre__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-mute); font-size: var(--type-xs); }
.os-theatre__value { display: grid; justify-items: end; min-width: 46px; }
.os-theatre__value b { font-size: var(--type-lg); font-variant-numeric: tabular-nums; }
.os-theatre__value small { color: var(--text-mute); font-size: var(--type-xs); }
.os-quality-list { display: grid; gap: 1px; }
.os-quality-list > div {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--border-soft);
    color: var(--text-dim); font-size: var(--type-sm);
}
.os-quality-list > div:last-child { border-bottom: 0; }
.os-quality-list b { color: var(--text); font-variant-numeric: tabular-nums; }
.os-shadow__changes { margin-top: 8px; }
.os-shadow__issues { padding: 0; }
.os-shadow__issues > summary { padding: 11px 13px; }
.os-issue-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.os-issue-grid > div {
    min-width: 0; display: grid; gap: 2px;
    padding: 9px; border-radius: 8px; background: var(--bg-2);
}
.os-issue-grid b { font-size: var(--type-lg); font-variant-numeric: tabular-nums; }
.os-issue-grid span { color: var(--text-mute); font-size: var(--type-xs); line-height: 1.35; }
.os-issue-details { display: grid; gap: 5px; margin-top: 9px; }
.os-issue-details > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding-top: 6px; border-top: 1px solid var(--border-soft);
    font-size: var(--type-sm);
}
.os-issue-details small { color: var(--text-mute); text-align: right; }
.os-shadow__muted { margin: 9px 0 0; color: var(--text-mute); font-size: var(--type-sm); }
.os-shadow__filters { margin: 0; align-items: end; }
.os-shadow__filters .filter-field { flex: 0 1 180px; }
.os-shadow__filters .filter-field--grow { flex: 1 1 260px; }
.os-shadow__more { position: relative; align-self: end; }
.os-shadow__more > summary { list-style: none; height: 32px; }
.os-shadow__more > summary::-webkit-details-marker { display: none; }
.os-shadow__more > summary::marker { content: ""; }
.os-shadow__more-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    width: min(260px, calc(100vw - 40px));
    display: grid; gap: 5px;
    padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-1); box-shadow: var(--shadow-lg);
}
.os-shadow__more-panel .label:not(:first-child) { margin-top: 4px; }
.os-shadow__results-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 0 2px; color: var(--text-mute); font-size: var(--type-sm);
}
.os-shadow__results-head b { color: var(--text); }
.os-unit-list { display: grid; gap: 8px; }
.os-unit { padding: 11px 12px; }
.os-unit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.os-unit__copy { min-width: 0; }
.os-unit__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; color: var(--text-mute); font-size: var(--type-xs); }
.os-unit__copy h3 { margin: 6px 0 0; font-size: var(--type-md); line-height: 1.3; }
.os-unit__copy > p {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    margin: 4px 0 0; color: var(--text-dim); font-size: var(--type-ui); line-height: 1.42;
}
.os-unit__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 9px; }
.os-unit__facts > span { min-width: 120px; display: grid; gap: 1px; }
.os-unit__facts small { color: var(--text-mute); font-size: var(--type-2xs); text-transform: uppercase; letter-spacing: .04em; }
.os-unit__facts b { color: var(--text-dim); font-size: var(--type-sm); font-weight: 600; }
.os-unit__footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-soft);
}
.os-unit__clusters { display: flex; flex-wrap: wrap; gap: 3px; }
.os-unit__why, .os-unit__review { margin-left: auto; position: relative; overflow: visible; }
.os-unit__review { margin-left: 0; }
.os-unit__why > summary, .os-unit__review > summary { padding: 5px 7px; font-size: var(--type-xs); }
.os-unit__why > .disclosure__body {
    position: absolute; right: 0; bottom: calc(100% + 5px); z-index: 15;
    width: min(400px, calc(100vw - 40px));
    padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-1); box-shadow: var(--shadow-lg);
}
.os-unit__why ul { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: var(--type-sm); }
.os-unit__why p { margin: 0; color: var(--text-mute); font-size: var(--type-sm); }
.os-unit__tech { display: grid; gap: 2px; margin-top: 8px; color: var(--text-mute); font-size: var(--type-xs); }
.os-unit__tech code { word-break: break-all; }
.os-unit__review > .os-review-form {
    position: absolute; right: 0; bottom: calc(100% + 5px); z-index: 16;
    width: min(680px, calc(100vw - 40px));
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    padding: 11px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-1); box-shadow: var(--shadow-lg);
}
.os-review-form label { min-width: 0; }
.os-review-form .select, .os-review-form .textarea { width: 100%; }
.os-review-form__note, .os-review-form__actions { grid-column: 1 / -1; }
.os-review-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.os-review-form__actions small { color: var(--text-mute); font-size: var(--type-xs); }
.os-review-queue { display: grid; gap: 10px; }
.os-review-queue__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.os-review-queue__head h3 {
    display: flex; align-items: center; gap: 6px;
    margin: 0; font-size: var(--type-md);
}
.os-review-queue__head p {
    max-width: 850px; margin: 3px 0 0;
    color: var(--text-mute); font-size: var(--type-sm); line-height: 1.4;
}
.os-review-progress {
    height: 6px; overflow: hidden;
    border-radius: 999px; background: var(--bg-3);
}
.os-review-progress > span {
    display: block; height: 100%; border-radius: inherit;
    background: var(--accent); transition: width .2s ease;
}
.os-review-queue__stats {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
}
.os-review-queue__stats > div {
    min-width: 0; display: grid; gap: 2px;
    padding: 8px 9px; border: 1px solid var(--border-soft);
    border-radius: 8px; background: var(--bg-1);
}
.os-review-queue__stats small {
    min-height: 2.35em; overflow: hidden;
    color: var(--text-mute); font-size: var(--type-2xs); text-transform: uppercase;
    letter-spacing: .04em; line-height: 1.18;
}
.os-review-queue__stats b { font-size: var(--type-md); font-variant-numeric: tabular-nums; }
.os-review-queue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-review-queue__breakdown { margin-top: -2px; }
.os-review-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.os-review-breakdown > div { min-width: 0; display: grid; gap: 5px; }
.os-review-breakdown > div > b { font-size: var(--type-sm); }
.os-review-breakdown span {
    display: flex; justify-content: space-between; gap: 10px;
    padding-top: 5px; border-top: 1px solid var(--border-soft);
    color: var(--text-dim); font-size: var(--type-sm);
}
.os-review-breakdown small { color: var(--text-mute); text-align: right; }

@media (max-width: 900px) {
    .os-shadow__overview { grid-template-columns: 1fr; }
    .os2-gate__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os2-leaf-card__decision { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os2-leaf-review-form { grid-template-columns: 130px minmax(0, 1fr); }
    .os2-leaf-review-form__wide { grid-column: auto; }
    .os-issue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os-review-queue__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .os-shadow__intro { display: grid; gap: 10px; padding: 12px; }
    .os-shadow__run { justify-items: start; }
    .os2-gate__head { display: grid; gap: 7px; }
    .os2-leaf-review-shell__head,
    .os2-leaf-card__head,
    .os2-leaf__head { display: grid; gap: 7px; }
    .os2-leaf-review__filters .filter-field,
    .os2-leaf-review__filters .filter-field--grow,
    .os2-leaf-review__filters .os2-leaf-review__limit { flex: 1 1 100%; }
    .os2-leaf-review__result-count { display: grid; gap: 2px; }
    .os2-leaf-card__decision,
    .os2-leaf-review-form { grid-template-columns: 1fr; }
    .os2-leaf-review-form__actions { grid-column: auto; align-items: stretch; }
    .os2-leaf-review-form__actions .btn { flex: 1 1 auto; justify-content: center; }
    .os2-leaf-review-form__actions small { width: 100%; margin-left: 0; }
    .os2-gate__summary { grid-template-columns: 1fr; }
    .os-theatre__main small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .os-shadow__filters .filter-field,
    .os-shadow__filters .filter-field--grow { flex: 1 1 100%; }
    .os-shadow__more { width: 100%; }
    .os-shadow__more > summary { width: 100%; justify-content: center; }
    .os-shadow__more-panel { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
    .os-shadow__results-head { align-items: flex-start; flex-direction: column; gap: 2px; }
    .os-unit__head { display: grid; gap: 7px; }
    .os-unit__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .os-unit__facts > span { min-width: 0; }
    .os-unit__why { margin-left: auto; }
    .os-unit__why > .disclosure__body,
    .os-unit__review > .os-review-form {
        position: fixed; left: 10px; right: 10px; bottom: 10px;
        width: auto; max-height: calc(100dvh - 20px); overflow: auto;
    }
    .os-unit__review > .os-review-form { grid-template-columns: 1fr; }
    .os-review-form__note, .os-review-form__actions { grid-column: auto; }
    .os-review-form__actions { align-items: stretch; flex-direction: column; }
    .os-review-form__actions .btn { width: 100%; justify-content: center; }
    .os-review-queue__head { display: grid; gap: 8px; }
    .os-review-queue__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os-review-queue__actions .btn { flex: 1 1 auto; justify-content: center; }
    .os-review-breakdown { grid-template-columns: 1fr; }
}

/* Independent holdout is a long review workflow, not a floating quick-edit menu. */
.os-holdout .os-unit__footer { align-items: flex-start; }
.os-holdout .os-unit__review {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
}
.os-holdout .os-unit__review > summary { width: max-content; }
.os-holdout .os-unit__review > .os-review-form {
    position: static;
    width: 100%;
    margin-top: 7px;
    box-shadow: none;
}

@media (max-width: 640px) {
    .os-holdout .os-unit__review > .os-review-form {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-height: none;
        overflow: visible;
    }
}

/* User notification center */
.sidebar-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.notification-toggle,
.notification-mobile-toggle {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.notification-toggle:hover,
.notification-mobile-toggle:hover,
.notification-toggle[aria-expanded="true"],
.notification-mobile-toggle[aria-expanded="true"] {
    color: var(--text);
    background: color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.notification-toggle svg,
.notification-mobile-toggle svg { display: block; }
.notification-mobile-toggle { display: none; }
.notification-center-backdrop {
    position: fixed;
    inset: 0;
    z-index: 109;
    background: rgba(6, 8, 12, .36);
    opacity: 0;
    transition: opacity .16s ease;
}
.notification-center-backdrop.is-open { opacity: 1; }
.notification-center {
    position: fixed;
    z-index: 110;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-1);
    box-shadow: -10px 0 28px rgba(0, 0, 0, .16);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
}
.notification-center.is-open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}
.notification-center__head {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px 14px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.notification-center__heading { min-width: 0; }
.notification-center__title {
    margin: 0;
    color: var(--text);
    font-size: var(--type-lg);
    font-weight: 600;
    line-height: 1.2;
}
.notification-center__summary {
    display: block;
    margin-top: 4px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.2;
}
.notification-center__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.notification-center__read-all,
.notification-center__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
}
.notification-center__read-all[hidden],
.notification-center__more[hidden] {
    display: none !important;
}
.notification-center__read-all:hover,
.notification-center__close:hover {
    color: var(--text);
    background: var(--bg-2);
}
.notification-center__read-all:focus-visible,
.notification-center__close:focus-visible,
.notification-item__dismiss:focus-visible,
.notification-center__more:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.notification-center__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 20px;
}
.notification-center__loading,
.notification-center__empty,
.notification-center__error {
    padding: 48px 20px;
    color: var(--text-mute);
    font-size: var(--type-sm);
    line-height: 1.5;
    text-align: center;
}
.notification-center__error { color: var(--danger); }
.notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 32px;
    gap: 12px;
    align-items: start;
    padding: 16px 0;
    border-radius: 0;
    color: var(--text);
}
.notification-item + .notification-item {
    border-top: 1px solid var(--border-soft);
}
.notification-item__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: var(--text-mute);
}
.notification-item.is-unread .notification-item__icon { color: var(--accent); }
.notification-item.level-bad .notification-item__icon { color: var(--danger); }
.notification-item__main {
    min-width: 0;
    color: inherit;
}
.notification-item__link {
    display: block;
    text-decoration: none;
}
.notification-item__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: 2px;
}
.notification-item__title {
    color: var(--text);
    font-size: var(--type-sm);
    font-weight: 500;
    line-height: 1.35;
}
.notification-item.is-unread .notification-item__title { font-weight: 600; }
.notification-item__message {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--type-xs);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.notification-item__meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-mute);
    font-size: var(--type-2xs);
}
.notification-item__arrow {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease;
}
.notification-item__link:hover .notification-item__title { color: var(--accent); }
.notification-item__link:hover .notification-item__arrow { transform: translateX(2px); }
.notification-item__dismiss {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
    opacity: .72;
}
.notification-item__dismiss:hover {
    color: var(--text);
    background: var(--bg-2);
    opacity: 1;
}
.notification-center__more {
    flex: 0 0 auto;
    min-height: 44px;
    margin: 0 20px 12px;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid var(--border-soft);
    background: transparent;
    color: var(--text-dim);
    font-size: var(--type-sm);
    cursor: pointer;
}
.notification-center__more:hover {
    color: var(--text);
}
body.notification-center-open { overflow: hidden; }
.login-page-body .notification-mobile-toggle,
.login-page-body .notification-center,
.login-page-body .notification-center-backdrop { display: none !important; }

@media (max-width: 900px) {
    .notification-mobile-toggle {
        display: inline-flex;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 61;
        box-shadow: none;
    }
    .notification-center {
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        border-left: 0;
        border-radius: 0;
    }
    .notification-center__head {
        min-height: 64px;
        padding: 12px 12px 12px 16px;
    }
    .notification-center__list { padding: 0 16px; }
    .notification-center__more { margin-right: 16px; margin-left: 16px; }
}
/* Operational report · R2c.3 quantity presentation */
.ov-report-identity {
    display: inline-block;
    margin-left: 6px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    vertical-align: baseline;
}
.ov-report-identity > summary {
    cursor: pointer;
}
.ov-report-identity > div {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin-top: 4px;
    line-height: 1.35;
}
.ov-report-identity code {
    color: inherit;
    font-size: var(--type-xs);
}
.ov-evidence-link {
    padding: 0;
    border: 0;
    color: var(--accent);
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ov-evidence-link:hover { color: var(--text); }
.ov-quantity-card {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
}
.ov-quantity-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
    font-size: var(--type-sm);
}
.ov-quantity-card__head span {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.ov-quantity-card__list {
    display: grid;
    gap: 3px;
}
.ov-quantity-entry {
    padding: 5px 0;
    border-top: 1px solid var(--border-soft);
}
.ov-quantity-entry:first-child { border-top: 0; }
.ov-quantity-entry__summary {
    color: var(--text);
    font-size: var(--type-sm);
    line-height: 1.35;
}
.ov-quantity-entry__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}
.ov-quantity-entry__flags span {
    padding: 1px 6px;
    border: 1px solid var(--warn-border);
    border-radius: 999px;
    color: var(--warn);
    background: var(--warn-soft);
    font-size: var(--type-2xs);
}
.ov-quantity-entry__trace { margin-top: 2px; color: var(--text-mute); }
.ov-quantity-entry__trace summary {
    width: max-content;
    cursor: pointer;
    font-size: var(--type-xs);
}
.ov-quantity-entry__trace p,
.ov-quantity-entry__trace div {
    margin: 3px 0 0;
    padding-left: 12px;
    font-size: var(--type-xs);
    line-height: 1.35;
}
.ov-quantity-trace-all {
    margin-top: 6px;
    color: var(--text-dim);
    font-size: var(--type-xs);
}
.ov-quantity-trace-all > summary {
    width: max-content;
    cursor: pointer;
}
.ov-quantity-trace-all__list {
    max-height: 280px;
    margin-top: 5px;
    overflow: auto;
    border-top: 1px solid var(--border-soft);
}
.ov-quantity-trace-all__row {
    padding: 5px 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-dim);
    line-height: 1.3;
}
.ov-quantity-trace-all__row small {
    display: block;
    margin-top: 2px;
    color: var(--text-mute);
}
.ov-quantity-card__notice {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: var(--type-xs);
    line-height: 1.35;
}

/* Event pulse: one visual surface, quiet controls, details on demand. */
.event-pulse-page {
    width: min(100%, 1280px);
    margin-inline: auto;
}
.event-pulse-page__header {
    align-items: center;
    margin-bottom: 18px;
}
.event-pulse-periods {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
}
.event-pulse-periods > .label {
    margin: 0;
    white-space: nowrap;
}
.event-pulse-custom-period {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.event-pulse-custom-period[hidden],
#event-pulse-submit[hidden] {
    display: none;
}
.event-pulse-custom-period .input {
    width: 174px;
}
.event-pulse-loading {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-mute);
    font-size: var(--type-sm);
}
@media (max-width: 720px) {
    .event-pulse-page__header {
        align-items: flex-start;
    }
    .event-pulse-periods {
        width: 100%;
        flex-wrap: wrap;
    }
    .event-pulse-custom-period {
        width: 100%;
    }
    .event-pulse-custom-period .input {
        min-width: 0;
        width: 100%;
    }
}
@media (max-width: 460px) {
    .event-pulse-periods > .label {
        width: 100%;
    }
    .event-pulse-periods > .select {
        flex: 1 1 auto;
    }
    .event-pulse-custom-period {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .event-pulse-custom-period > span {
        display: none;
    }
}

/* Event feed: event content first, diagnostics and rare filters on demand. */
.event-feed-page {
    width: min(100%, 1120px);
    margin-inline: auto;
}
.event-feed-head {
    align-items: center;
    margin-bottom: 16px;
}
.event-feed-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.event-feed-summary strong {
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
}
.event-feed-primary-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(120px, auto) minmax(170px, auto) auto;
    gap: 8px;
    align-items: center;
}
.event-feed-primary-filters label { min-width: 0; }
.event-feed-primary-filters .input,
.event-feed-primary-filters .select { width: 100%; }
.event-feed-search__field {
    position: relative;
    display: block;
}
.event-feed-search__field > svg {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--text-mute);
    pointer-events: none;
}
.event-feed-search__field .input { padding-left: 37px; }
.event-feed-submit { min-height: 34px; }
.event-feed-more { margin-top: 8px; }
.event-feed-more > summary,
.event-layer-status > summary {
    width: max-content;
    font-size: var(--type-sm);
    font-weight: 500;
}
.event-feed-more__body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}
.event-feed-more__body label { min-width: 0; }
.event-feed-more__body .select { width: 100%; }
.event-layer-status {
    margin: 10px 0 22px;
}
.event-layer-status__body {
    display: grid;
    gap: 10px;
    max-width: 760px;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
}
.event-layer-status__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
}
.event-layer-status__metrics div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.event-layer-status__metrics dt {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-layer-status__metrics dd {
    margin: 0;
    color: var(--text);
    font-size: var(--type-sm);
    font-weight: 600;
}
.event-layer-status__quality {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-layer-status__quality span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.event-plan-state {
    margin: 0;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
}
.event-quality-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-mute);
}
.event-quality-dot.is-full { background: var(--success); }
.event-quality-dot.is-structured { background: var(--accent); }
.event-day-group + .event-day-group { margin-top: 28px; }
.event-day-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.event-day-head h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--type-sm);
    font-weight: 600;
}
.event-day-head span {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-day-list { border-top: 1px solid var(--border); }
.event-layer-card {
    border-bottom: 1px solid var(--border);
    padding: 18px 2px 19px;
}
.event-layer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 11px;
    margin-bottom: 7px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-layer-meta .event-kind {
    color: var(--text-dim);
    font-weight: 600;
}
.event-layer-card h3 {
    max-width: 950px;
    margin: 0;
    color: var(--text);
    font-size: var(--type-md);
    line-height: 1.35;
}
.event-layer-summary {
    max-width: 950px;
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.5;
}
.event-layer-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 13px 0 0;
}
.event-layer-slots > div { min-width: 0; }
.event-layer-slots dt {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-layer-slots dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: var(--type-sm);
    line-height: 1.4;
}
.event-facts { margin-top: 13px; }
.event-facts h4,
.event-evidence h4 {
    margin: 0 0 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 600;
}
.event-fact-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.event-fact-list li {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding-left: 14px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.4;
}
.event-fact-list li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-mute);
}
.event-fact-list small { color: var(--text-mute); }
.event-missing {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-evidence { margin-top: 12px; }
.event-evidence > summary {
    width: 100%;
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
}
.event-evidence > summary span {
    margin-left: 4px;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 400;
}
.event-evidence__body {
    margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
}
.event-update-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    margin-bottom: 12px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-update-row b { color: var(--text-dim); font-weight: 600; }
.event-evidence__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 24px;
}
.event-cluster-list { display: grid; }
.event-cluster-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border-soft);
    padding: 7px 0;
    color: var(--text-dim);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.event-cluster-link:hover b { color: var(--accent); }
.event-cluster-link b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--type-sm);
    font-weight: 500;
}
.event-cluster-link small {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.event-sources {
    margin: 8px 0 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.45;
}
.event-quote-list {
    margin: 0;
    padding-left: 19px;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.45;
}
.event-quote-list li + li { margin-top: 6px; }
.event-technical { margin-top: 12px; }
.event-technical > summary {
    width: max-content;
    color: var(--text-mute);
    font-size: var(--type-xs);
    font-weight: 500;
}
.event-tech-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    border-top: 1px solid var(--border-soft);
    padding-top: 8px;
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: var(--type-2xs);
    overflow-wrap: anywhere;
}
@media (max-width: 800px) {
    .event-feed-primary-filters {
        grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(120px, auto));
    }
    .event-feed-submit { grid-column: 1 / -1; width: max-content; }
    .event-feed-more__body,
    .event-layer-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .event-feed-summary { width: 100%; }
    .event-feed-primary-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-feed-search { grid-column: 1 / -1; }
    .event-feed-submit { grid-column: auto; width: 100%; }
    .event-feed-more__body,
    .event-layer-slots,
    .event-evidence__grid { grid-template-columns: minmax(0, 1fr); }
    .event-layer-card { padding-block: 16px; }
    .event-evidence > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .event-evidence > summary span {
        width: 100%;
        margin-left: 0;
    }
}

/* Observations: quiet saved-query list and change-first detail view. */
.observations-page,
.observation-detail-page {
    width: min(100%, 1080px);
    margin-inline: auto;
}
.observations-head {
    align-items: center;
    margin-bottom: 14px;
}
.observations-heading {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.observations-count {
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.observations-add svg,
.observation-template-add svg,
.observation-back svg,
.observation-detail-more > summary svg {
    width: 20px;
    height: 20px;
}
.observations-list {
    border-top: 1px solid var(--border);
}
.observation-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    gap: 10px;
    align-items: center;
    min-height: 72px;
    border-bottom: 1px solid var(--border);
    padding: 11px 4px;
    color: inherit;
    text-decoration: none;
}
.observation-row:hover {
    background: color-mix(in srgb, var(--bg-2) 58%, transparent);
}
.observation-row__icon,
.observation-row__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mute);
}
.observation-row.has-updates .observation-row__icon { color: var(--accent); }
.observation-row__body {
    display: grid;
    min-width: 0;
    gap: 4px;
}
.observation-row__body > strong {
    overflow: hidden;
    color: var(--text);
    font-size: var(--type-ui);
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.observation-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 12px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.observation-row__meta > span + span::before,
.observation-detail-meta > span + span::before {
    content: "·";
    margin-right: 12px;
    color: var(--border);
}
.observation-row__state { color: var(--text-dim); }
.observation-row__state.is-important,
.observation-row__state.is-error { color: var(--warn); }
.observations-empty { margin-top: 24px; }
.observation-templates { margin-top: 20px; }
.observation-templates > summary {
    width: max-content;
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
}
.observation-template-list {
    border-top: 1px solid var(--border-soft);
    padding-top: 0;
}
.observation-template-row {
    display: grid;
    grid-template-columns: minmax(180px, .75fr) minmax(300px, 1.25fr);
    gap: 22px;
    align-items: center;
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 2px;
}
.observation-template-row__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.observation-template-row__copy strong {
    color: var(--text);
    font-size: var(--type-sm);
    font-weight: 600;
}
.observation-template-row__copy span {
    color: var(--text-mute);
    font-size: var(--type-xs);
    line-height: 1.4;
}
.observation-template-row__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 7px;
    align-items: center;
}
.observation-template-row__form .input { width: 100%; }
.observation-template-add,
.observation-back,
.observation-detail-more > summary {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-color: transparent;
    background: transparent;
}
.observation-detail-head {
    display: grid;
    grid-template-columns: 40px minmax(220px, 1fr) auto;
    gap: 10px 12px;
    align-items: start;
    margin-bottom: 14px;
}
.observation-detail-heading {
    min-width: 0;
    padding-top: 4px;
}
.observation-detail-heading .page-title {
    overflow-wrap: anywhere;
}
.observation-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-top: 5px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.observation-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}
.observation-detail-actions .btn svg {
    flex: 0 0 auto;
}
.observation-detail-more {
    position: relative;
}
.observation-detail-more > summary {
    list-style: none;
}
.observation-detail-more > summary::-webkit-details-marker { display: none; }
.observation-detail-more__menu {
    position: absolute;
    z-index: 8;
    top: calc(100% + 5px);
    right: 0;
    width: max-content;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px;
    background: var(--bg-1);
    box-shadow: var(--shadow-lg);
}
.observation-notice { margin: 0 0 10px; }
.observation-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0 0 18px;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 2px;
}
.observation-summary > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.observation-summary dt {
    color: var(--text);
    font-size: var(--type-md);
    font-weight: 600;
}
.observation-summary dd {
    margin: 0;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.observation-update {
    border-bottom: 1px solid var(--border);
    padding: 4px 2px 16px;
    margin-bottom: 16px;
}
.observation-update__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.observation-update__head h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--text);
    font-size: var(--type-ui);
    font-weight: 600;
}
.observation-update__head h2 svg { color: var(--text-mute); }
.observation-update.is-important .observation-update__head h2 svg,
.observation-update.is-important .observation-update__head > span { color: var(--warn); }
.observation-update__head > span {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.observation-update > p {
    max-width: 880px;
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
    line-height: 1.5;
}
.observation-update__metrics,
.observation-provenance__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 9px;
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.observation-update__metrics strong,
.observation-provenance__metrics strong {
    color: var(--text-dim);
    font-weight: 600;
}
.observation-update__details { margin-top: 9px; }
.observation-update__details > summary,
.observation-provenance > summary,
.observation-provenance__examples > summary {
    width: max-content;
    color: var(--text-dim);
    font-size: var(--type-xs);
    font-weight: 500;
}
.observation-change-list {
    max-width: 920px;
    border-top: 1px solid var(--border-soft);
    padding-top: 0;
}
.observation-change-row {
    display: grid;
    grid-template-columns: minmax(100px, 150px) minmax(0, 1fr);
    gap: 3px 14px;
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 0;
}
.observation-change-row > span {
    color: var(--text-mute);
    font-size: var(--type-xs);
}
.observation-change-row > strong {
    color: var(--text-dim);
    font-size: var(--type-sm);
    font-weight: 500;
    line-height: 1.4;
}
.observation-change-row > small {
    grid-column: 2;
    color: var(--text-mute);
    font-size: var(--type-2xs);
}
.observation-provenance {
    border-bottom: 1px solid var(--border);
    padding: 0 2px 14px;
    margin-bottom: 18px;
}
.observation-provenance > summary {
    display: flex;
    align-items: center;
    gap: 7px;
}
.observation-provenance__examples { margin-top: 10px; }
.observation-events { margin-top: 6px; }
.observation-tabs {
    display: flex;
    gap: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.observation-tabs label { cursor: pointer; }
.observation-tabs input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.observation-tabs span {
    display: block;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    padding: 8px 1px;
    color: var(--text-mute);
    font-size: var(--type-sm);
}
.observation-tabs input:checked + span {
    border-color: var(--text);
    color: var(--text);
    font-weight: 600;
}
.observation-tabs input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.observation-event-list {
    display: grid;
    gap: 10px;
}
.observation-show-more { justify-self: center; }
@media (max-width: 820px) {
    .observation-detail-head {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    .observation-detail-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
@media (max-width: 640px) {
    .observations-head {
        align-items: center;
    }
    .observation-template-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .observation-detail-actions .btn:not(.btn-icon) {
        flex: 1 1 auto;
        justify-content: center;
    }
    .observation-update__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .observation-change-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .observation-change-row > small { grid-column: 1; }
}
@media (max-width: 420px) {
    .observation-row {
        grid-template-columns: 34px minmax(0, 1fr) 22px;
        gap: 7px;
    }
    .observation-row__body > strong { white-space: normal; }
    .observations-add span { display: none; }
    .observations-add {
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 999px;
    }
    .observation-detail-actions .btn:not(.btn-icon) span { display: none; }
    .observation-detail-actions .btn:not(.btn-icon) {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 999px;
    }
}