/* clustering.css — «Кластеризация запросов по ТОП выдачи» (spec-clustering §6, К3).
   Страницы: templates/clustering/tool.html (форма, смета, прогресс, результат), clustering/shared.html (ссылка
   «только просмотр»), вкладка журнала /semantics. Разметка и стили — упрощённый макет
   (docs/research/clustering-simplify-audit.md, 31b6f7f), классы cs-* — из него as-is; поверх — компоненты
   static/positions.css и static/semantics.css. Цвета — только var(--…), обе темы; без inline-стилей (CSP). */

.cl-layout > .card { margin-top: 0; }
.sem-label-row .pos-linkbtn, .cl-more .pos-linkbtn, .cl-bulk .pos-linkbtn { font-size: var(--fs-sm); }
/* [hidden] сильнее display у .btn / .pos-chip / .cs-gfoot внутри страницы (демо, share, состояния) */
.cl-page.pos-page [hidden] { display: none; }

/* ══ Форма ═════════════════════════════════════════════════════════ */
.cl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-xl); align-items: start; }
.cs-form { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.cs-form .form-group { margin-bottom: 0; }
.cl-ta { font-variant-numeric: tabular-nums; }
.cs-ta { min-height: 180px; }
.cs-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--text-dim); }
.cl-counter { font-variant-numeric: tabular-nums; }
.cl-counter b { color: var(--text); font-weight: 600; }
.cs-src { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.cs-src .pos-linkbtn { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--fs-sm); min-height: 32px; }
.cs-help { margin-top: var(--space-2xs); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; transition: color var(--dur-fast); }
.cs-help--hl { color: var(--yellow); }
.cs-repeat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--text-dim); }
.cs-repeat svg { color: var(--accent); flex-shrink: 0; }
.cs-repeat .pos-linkbtn { font-size: var(--fs-sm); }
.cs-src-panel { display: flex; flex-direction: column; gap: var(--space-md); }
.cs-src-panel .sem-label-row { margin-bottom: 0; }
.cs-grid-3 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-lg); align-items: start; }
.cs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.cs-grid-3 .form-group, .cs-grid-2 .form-group { margin-bottom: 0; }
.cs-set { border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 25%, var(--bg-card)); }
.cs-set > summary { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-height: 48px; padding: var(--space-sm) var(--space-lg); cursor: pointer; list-style: none; font-weight: 600; }
.cs-set > summary::-webkit-details-marker { display: none; }
.cs-set > summary > svg { color: var(--accent); }
.cs-set > summary .pos-muted { font-weight: 400; font-size: var(--fs-sm); }
.cs-set > summary .pos-dd-chev { margin-left: auto; transition: transform var(--dur-fast); }
.cs-set[open] > summary .pos-dd-chev { transform: rotate(180deg); }
.cs-set > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.cs-set-body { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 1px solid var(--border); }
.cs-seg-sub { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); }
.cs-checks { display: flex; flex-direction: column; gap: var(--space-2xs); }
.cs-freq .pos-check-line { font-size: var(--fs-sm); min-height: 32px; }
.cs-minus { margin-top: var(--space-sm); }
.cl-thr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.cl-thr .pos-seg-btn { min-width: 40px; font-variant-numeric: tabular-nums; }
.cl-thr-other { width: 72px; min-height: 36px; }
.cs-form .pos-ac { position: relative; }

/* Источники: файл, сбор Вордстата, проект */
.cl-src-pick { display: flex; flex-direction: column; gap: var(--space-xs); }
.cl-src-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); cursor: pointer; min-height: 44px; font-size: var(--fs-sm); transition: border-color var(--dur-fast); }
.cl-src-item:hover { border-color: var(--border-hover); }
.cl-src-item:has(input:checked) { border-color: var(--accent); background: var(--accent-glow); }
.cl-src-item input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.cl-src-item-t { font-weight: 600; overflow-wrap: anywhere; }
.cl-src-item-s { color: var(--text-dim); font-size: var(--fs-xs); }
.cl-src-item-n { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-src-empty { font-size: var(--fs-sm); color: var(--text-dim); }
.cl-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-lg); border: 1px dashed var(--border-hover); border-radius: var(--radius-sm); background: var(--bg-input); }
.cl-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cl-file-label { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; }
.cl-file-input:focus-visible + .cl-file-label { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-file-name { font-size: var(--fs-sm); color: var(--text-dim); overflow-wrap: anywhere; }
#cl-file-counter { font-size: var(--fs-sm); color: var(--text-dim); }
.cl-guest-src { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
.cl-guest-src svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ══ Смета ═════════════════════════════════════════════════════════ */
.cl-est { position: sticky; top: calc(var(--space-4xl) + var(--space-lg)); }
.cs-est { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.cl-est-h { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; margin: 0; }
.cs-est-body { display: flex; flex-direction: column; gap: var(--space-md); }
.cs-est-lines { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-sm); }
.cs-est-lines:empty { display: none; }
.cs-est-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.cs-est-line > span { color: var(--text-dim); }
.cs-est-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-est-free { color: var(--accent); }
.cs-est-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.cs-est-drop { font-size: var(--fs-sm); color: var(--text-dim); }
.cs-est-drop > summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); cursor: pointer; list-style: none; }
.cs-est-drop > summary::-webkit-details-marker { display: none; }
.cs-est-drop > summary .pos-linkbtn { font-size: var(--fs-sm); white-space: nowrap; }
.cs-est-drop > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.cs-est-drop ul { list-style: none; margin: var(--space-xs) 0 0; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--bg-input); display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--fs-xs); }
.cs-est-drop li { display: flex; justify-content: space-between; gap: var(--space-md); }
.cs-est-drop li b { color: var(--text); font-variant-numeric: tabular-nums; }
.cs-est-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.cl-est-total-l { font-size: var(--fs-sm); color: var(--text-dim); }
.cl-est-sum { font-family: var(--font-heading); font-size: calc(var(--fs-base) + 9px); font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-est-cap { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.cs-est-cap a { color: var(--accent); }
.cs-est-meta { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--fs-sm); color: var(--text-dim); }
.cs-est-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.cs-est .btn-lg, .cs-est > .btn { width: 100%; justify-content: center; white-space: normal; }
.cs-est .btn-primary { min-height: 48px; }
.cs-est > .btn-ghost { min-height: 44px; }
.cs-est-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.cs-est-links .pos-linkbtn { font-size: var(--fs-sm); min-height: 32px; }
.cs-est-warn { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.5; background: color-mix(in srgb, var(--yellow) 10%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--yellow) 35%, transparent); }
.cs-est-warn-i { display: inline-flex; color: var(--yellow); flex-shrink: 0; margin-top: 2px; }
.cs-est-ok { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
.cs-est-ok svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.cs-est .pos-check-line { font-size: var(--fs-sm); min-height: 40px; }
.cl-plan { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--space-xs); border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-glow); color: var(--text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; line-height: 1.5; }
.cl-est-bar { display: none; }

/* ══ Прогресс ══════════════════════════════════════════════════════ */
.cs-prog { padding: var(--space-lg) var(--space-xl) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.cs-prog-t { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; font-weight: 600; }
.cs-prog-t span { font-weight: 400; color: var(--text-dim); font-size: var(--fs-sm); }
.cs-prog .pos-progress { height: 8px; }
.cs-prog-s { display: flex; justify-content: space-between; gap: var(--space-xs) var(--space-md); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-dim); }
.cs-prog-s b { color: var(--text); font-variant-numeric: tabular-nums; }
.cl-banners { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.cl-banners .pos-banner { margin: 0; }
.cl-banner-acts { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Ширины полос (прогресс): шаг 5%, без inline-стилей */
.cl-p0 { width: 0; } .cl-p5 { width: 5%; } .cl-p10 { width: 10%; } .cl-p15 { width: 15%; } .cl-p20 { width: 20%; }
.cl-p25 { width: 25%; } .cl-p30 { width: 30%; } .cl-p35 { width: 35%; } .cl-p40 { width: 40%; } .cl-p45 { width: 45%; }
.cl-p50 { width: 50%; } .cl-p55 { width: 55%; } .cl-p60 { width: 60%; } .cl-p65 { width: 65%; } .cl-p70 { width: 70%; }
.cl-p75 { width: 75%; } .cl-p80 { width: 80%; } .cl-p85 { width: 85%; } .cl-p90 { width: 90%; } .cl-p95 { width: 95%; }
.cl-p100 { width: 100%; }

/* ══ Результат ═════════════════════════════════════════════════════ */
.cs-newrun { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.cs-newrun .pos-linkbtn { font-size: var(--fs-sm); }
.cs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; }
.cs-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-kpis .pos-kpi { padding: var(--space-md) var(--space-xl); }
.cs-kpis .pos-kpi:last-child { border-right: none; }
.cs-kpi-link { color: inherit; text-decoration: none; display: block; width: 100%; border: none; border-right: 1px solid var(--border); background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast); }
.cs-kpi-link:hover { background: var(--bg-card-hover); }
.cs-kpi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-kpis .pos-kpi-label svg { color: var(--yellow); }
.cs-params { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; min-height: 48px; padding: var(--space-sm) var(--space-xl); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-dim); }
.cs-params > svg { color: var(--accent); }
.cs-params b { color: var(--text); font-weight: 500; }

/* Строка параметров = «Изменить бесплатно» (перегруппировка) */
.cl-regroup { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 25%, var(--bg-card)); }
.cl-regroup > summary { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-sm) var(--space-xl); min-height: 48px; cursor: pointer; list-style: none; }
.cl-regroup > summary::-webkit-details-marker { display: none; }
.cl-regroup > summary > svg { color: var(--accent); }
.cl-regroup > summary .pos-dd-chev { transition: transform var(--dur-fast); }
.cl-regroup[open] > summary .pos-dd-chev { transform: rotate(180deg); }
.cl-regroup > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-setline > summary { font-weight: 400; font-size: var(--fs-sm); color: var(--text-dim); }
.cs-setline > summary b { color: var(--text); font-weight: 500; }
.cs-setline > summary .cs-edit { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; }
.cl-rg-body { padding: var(--space-xs) var(--space-xl) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.cl-rg-grid { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); align-items: end; }
.cl-rg-grid .form-group { margin-bottom: 0; }
.cl-rg-grid .form-label { font-size: var(--fs-xs); }
.cs-rg-more > summary { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 36px; cursor: pointer; list-style: none; color: var(--text-dim); font-size: var(--fs-sm); }
.cs-rg-more > summary::-webkit-details-marker { display: none; }
.cs-rg-more[open] > summary .pos-dd-chev { transform: rotate(180deg); }
.cs-rg-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.cs-rg-more .cl-excl { margin-top: var(--space-sm); }
.cl-excl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.cl-excl .form-label { font-size: var(--fs-xs); }
.cl-stopurls { list-style: none; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cl-stopurls li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; padding: var(--space-2xs) var(--space-md); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); min-height: 40px; }
.cl-stopurls li:last-child { border-bottom: none; }
.cl-stopurls .cl-u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.cl-stopurls .cl-n { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }
.cl-eff { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
.cl-eff svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.cl-eff b { color: var(--text); }
.cl-preview { display: flex; align-items: center; gap: var(--space-md) var(--space-lg); flex-wrap: wrap; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-glow); }
.cs-rg-nums { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); flex: 1 1 320px; font-size: var(--fs-sm); color: var(--text-dim); }
.cs-rg-nums b { color: var(--text); font-variant-numeric: tabular-nums; }
.cl-preview-acts { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.cl-preview-acts .btn { min-height: 40px; }
.cl-rg-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--fs-sm); color: var(--text-dim); }
.cl-rg-foot > span { display: inline-flex; gap: var(--space-xs); align-items: center; }
.cl-rg-foot .btn { min-height: 40px; }
#rg-show-row { justify-content: flex-end; }
#rg-warn:empty { display: none; }
#rg-warn { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Вкладки + тулбар */
.cl-tabs { display: flex; gap: var(--space-2xs); padding: 0 var(--space-xl); border-bottom: 1px solid var(--border); overflow-x: auto; }
.cl-tab { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-md); font-weight: 500; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast), border-color var(--dur-fast); }
.cl-tab:hover { color: var(--text); }
.cl-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.cl-tab .pos-seg-count { font-size: var(--fs-sm); }
.cl-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-tb { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border); }
.cs-tb .pos-search { flex: 1 1 260px; }
.cs-tb-sel { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.cs-tb-sel select { width: auto; min-height: 40px; }

/* Список групп (строки-аккордеоны) */
.cs-gh, .cs-g > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px 104px minmax(0, 240px) 20px; gap: var(--space-md); align-items: center; padding: 0 var(--space-xl); }
.cs-gh { min-height: 40px; font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; border-bottom: 1px solid var(--border); }
.cs-nosite .cs-gh, .cs-nosite .cs-g > summary { grid-template-columns: 24px minmax(0, 1fr) 64px 104px 20px; }
.cs-nosite .cs-gh .cs-c-site { display: none; }
.cs-g { border-bottom: 1px solid var(--border); }
.cs-g > summary { min-height: 56px; padding-top: var(--space-xs); padding-bottom: var(--space-xs); cursor: pointer; list-style: none; transition: background var(--dur-fast); }
.cs-g > summary::-webkit-details-marker { display: none; }
.cs-g > summary:hover { background: var(--bg-card-hover); }
.cs-g > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-g[open] > summary { background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); }
.cs-g[open] > summary .cl-chev { transform: rotate(180deg); }
.cl-chev { display: inline-flex; color: var(--text-muted); transition: transform var(--dur-fast); }
.cl-cb { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; cursor: pointer; }
.cl-cb-hit { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cs-gname { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.cl-num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-num b { font-weight: 600; }
.cs-site { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; font-size: var(--fs-sm); color: var(--text-dim); }
.cs-site-u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cs-site--none { color: var(--text-muted); }
.cs-warn { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--yellow); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.cl-pos { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 var(--space-xs); border-radius: var(--radius-xs); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); background: var(--bg-input); }
.cl-type { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 1px var(--space-sm); border-radius: 9999px; border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--text-dim); }
.cl-type::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }
.cl-type--com { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cl-type--info { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.cl-type--mix { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.light .cl-type--info { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.cl-flag { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-xs); border-radius: var(--radius-xs); background: var(--bg-input); color: var(--text-dim); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; line-height: 1.6; }
.cl-flag--mk { background: var(--accent-glow); color: var(--text); }
.cl-flag--att { border: 1px dashed var(--border-hover); background: transparent; }
.cl-flag--man { background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--text); }

/* Раскрытая группа */
.cl-gbody { display: grid; gap: var(--space-xl); padding: var(--space-lg) var(--space-xl) var(--space-xl); background: color-mix(in srgb, var(--accent) 3%, var(--bg-card)); border-top: 1px solid var(--border); }
.cs-gbody { grid-template-columns: minmax(0, 1fr) 280px; }
.cs-gacts { display: flex; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-sm); }
.cs-gacts .btn { min-height: 36px; display: inline-flex; align-items: center; gap: var(--space-xs); }
.cs-gacts .pos-dd { margin-left: auto; }
.cl-q { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cl-q th { text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border); white-space: nowrap; }
.cl-q td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border); vertical-align: middle; height: 40px; }
.cl-q tr:last-child td { border-bottom: none; }
.cl-q tbody tr { transition: background var(--dur-fast); }
.cl-q tbody tr:hover { background: var(--bg-card-hover); }
.cl-q tr.sel td { background: var(--accent-glow); }
.cl-q .cl-c-cb { width: 32px; }
.cl-q .cl-c-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-ph { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); align-items: center; }
.cs-qu { display: block; font-size: var(--fs-xs); color: var(--yellow); margin-top: var(--space-2xs); overflow-wrap: anywhere; }
.cl-q-reason { font-size: var(--fs-xs); color: var(--text-dim); }
.cl-more { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--text-dim); min-height: 40px; }
.cl-gbody-loading { padding: var(--space-md) 0; }
.cl-gbody-err { font-size: var(--fs-sm); color: var(--text-dim); }
.cl-side { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.cl-box { padding: var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); min-width: 0; }
.cl-box-h { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-sm); }
.cl-leaders { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-sm); }
.cl-leaders li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; }
.cl-leaders .cl-u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.cl-leaders .cl-u b { color: var(--accent); font-weight: 600; }
.cl-leaders .cl-n { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.cl-sig-note { font-size: var(--fs-xs); color: var(--text-muted); }

/* Подвал списка: страницы + «Клавиши» (только ≥ 769 px, мышь) */
.cs-gfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-xl); font-size: var(--fs-sm); color: var(--text-dim); }
.cs-gfoot--flush { padding-left: 0; padding-right: 0; }
.cs-gfoot .pos-linkbtn { font-size: var(--fs-sm); }
.cl-goto { display: inline-flex; align-items: center; gap: var(--space-xs); }
.cl-goto .form-input { width: 72px; min-height: 40px; }

/* Без группы */
.cl-ung { padding: var(--space-lg) var(--space-xl); }
.cl-ung-why { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: var(--space-md); line-height: 1.5; }
.cl-ung-why svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.cs-ung-tb { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.cs-ung-tb .pos-search { flex: 1 1 240px; max-width: 360px; }
.cs-ung-tb .btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; }

/* Не вошли в расчёт — раскрывашка внизу отчёта */
.cs-drop { border-top: 1px solid var(--border); }
.cs-drop > summary { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: var(--space-sm) var(--space-xl); cursor: pointer; list-style: none; font-size: var(--fs-sm); color: var(--text-dim); }
.cs-drop > summary::-webkit-details-marker { display: none; }
.cs-drop > summary svg { flex-shrink: 0; }
.cs-drop > summary .pos-dd-chev { margin-left: auto; transition: transform var(--dur-fast); }
.cs-drop[open] > summary .pos-dd-chev { transform: rotate(180deg); }
.cs-drop > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-drop .cl-ung { padding-top: 0; }

/* Состояния */
.cl-state { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.cl-state .pos-empty { padding: var(--space-sm) 0 0; }
.cl-state-acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.cl-state-acts .btn { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-xs); }

/* Массовые действия, поповер переноса, клавиши */
.cl-bulk .btn { min-height: 36px; display: inline-flex; align-items: center; gap: var(--space-xs); }
.cl-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--space-2xs); border-radius: var(--radius-xs); border: 1px solid var(--border-hover); background: var(--bg-card); color: var(--text-dim); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; line-height: 1; }
.cl-move { width: 100%; border-radius: var(--radius); border: 1px solid var(--border-hover); background: var(--bg-card); box-shadow: var(--shadow-lg); overflow: hidden; }
.cl-move-modal .cl-move { max-width: 440px; }
.cl-move-t { padding: var(--space-md) var(--space-md) 0; font-weight: 600; }
.cl-move-head { padding: var(--space-md); border-bottom: 1px solid var(--border); }
.cl-move-head .form-input { min-height: 40px; }
.cl-move-list { list-style: none; max-height: 260px; overflow: auto; padding: var(--space-2xs); }
.cl-move-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; width: 100%; min-height: 44px; padding: var(--space-xs) var(--space-md); border: none; border-radius: var(--radius-xs); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background var(--dur-fast); }
.cl-move-item:hover, .cl-move-item.on { background: var(--accent-glow); }
.cl-move-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-move-item mark { background: transparent; color: var(--accent); font-weight: 600; }
.cl-move-item .cl-n { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-move-item--new { color: var(--accent); font-weight: 600; }
.cl-move-empty { padding: var(--space-md); font-size: var(--fs-sm); color: var(--text-muted); }
.cl-move-foot { display: flex; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }
.cl-move-foot span { display: inline-flex; gap: var(--space-2xs); align-items: center; }

/* Тосты правки (над нижним краем экрана) */
.cl-toast-area { position: fixed; left: 50%; bottom: var(--space-lg); transform: translateX(-50%); z-index: var(--z-popover); width: min(560px, calc(100vw - var(--space-xl))); display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; }
.cl-toast-area .cl-toast { pointer-events: auto; }
.cl-toast { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-lg); border-radius: var(--radius); border: 1px solid var(--border-hover); background: var(--bg-surface); box-shadow: var(--shadow-md); font-size: var(--fs-sm); }
.cl-toast > svg { color: var(--green); flex-shrink: 0; }
.light .cl-toast > svg { color: var(--accent); }
.cl-toast-t { flex: 1 1 200px; min-width: 0; }
.cl-toast-t b { font-weight: 600; }
.cl-toast .btn { min-height: 36px; display: inline-flex; align-items: center; gap: var(--space-xs); }

/* Модалки */
.cl-radio-list { display: flex; flex-direction: column; }
.cl-radio-list .pos-check-line { font-size: var(--fs-sm); }
.cl-share-link { display: flex; gap: var(--space-sm); }
.cl-share-link .form-input { flex: 1; min-width: 0; min-height: 44px; }
.cl-resume-warn { margin-top: var(--space-md); }

/* История под формой (компактно) и вкладка журнала */
.cs-hist { padding: 0; }
.cs-hist-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border); }
.cs-hist-h h2 { font-family: var(--font-heading); font-size: var(--fs-lg); margin: 0; }
.cs-hist-h .pos-linkbtn { font-size: var(--fs-sm); }
.cs-hist .sem-hist-loading, .cs-hist .sem-hist-error { margin: var(--space-lg) var(--space-xl); }
.cs-hist-list { list-style: none; margin: 0; padding: 0; }
.cs-hist-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs) var(--space-lg); align-items: center; padding: var(--space-sm) var(--space-xl); border-bottom: 1px solid var(--border); min-height: 56px; }
.cs-hist-list li:last-child { border-bottom: none; }
.cs-hist-t { display: block; max-width: 100%; padding: 0; border: none; background: none; font: inherit; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); cursor: pointer; }
.cs-hist-t:hover { color: var(--accent); }
.cs-hist-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.cs-hist-s { font-size: var(--fs-xs); color: var(--text-muted); }
.cs-hist-n { font-size: var(--fs-sm); color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-history { margin-top: var(--space-xl); }
.cl-hist-params { font-size: var(--fs-xs); color: var(--text-muted); }
.cl-j-tabs { margin: var(--space-lg) 0 0; }
.cl-j-panel { margin-top: var(--space-lg); }

/* Пример отчёта (гость) и share */
.cl-demo-note { margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; }
.cl-shared-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: center; }

.cl-page > #cl-progress, .cl-page > #cl-gone, .cl-page > .cs-hist { margin-top: var(--space-2xl); }
.cl-page > #cl-progress, .cl-page > #cl-result, .cl-page > .cs-hist { scroll-margin-top: calc(var(--space-4xl) + var(--space-xl)); }
#cl-progress:focus, #cl-result:focus { outline: none; }

@media (min-width: 769px) {
  /* Журнал /semantics: пятая карточка «Кластеризация» в сводке за 30 дней */
  .sem-kpis:has(#sem-k-clu) { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
  .cs-gmeta { display: none; }
}

/* ══ Адаптив ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cl-layout { grid-template-columns: minmax(0, 1fr); }
  .cl-est { position: static; }
  .cs-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-grid-3 > :last-child { grid-column: 1 / -1; }
  .cs-gbody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .sem-kpis:has(#sem-k-clu) .pos-kpi:nth-child(3) { border-bottom: 1px solid var(--border); }
  .sem-kpis:has(#sem-k-clu) .pos-kpi:nth-child(4) { border-right: 1px solid var(--border); }
  .cs-grid-2, .cl-excl { grid-template-columns: minmax(0, 1fr); }
  .cs-form, .cs-est { padding: var(--space-lg); }
  .cs-set > summary, .cs-set-body { padding-left: var(--space-md); padding-right: var(--space-md); }
  .cs-kpis .pos-kpi { padding: var(--space-md) var(--space-sm); border-bottom: none; min-width: 0; }
  .cs-kpis .pos-kpi-label { letter-spacing: 0; hyphens: auto; overflow-wrap: anywhere; }
  .cs-kpis .pos-kpi-sub { display: none; }
  .cs-tb, .cs-gfoot, .cs-drop > summary, .cs-prog, .cs-params, .cl-regroup > summary, .cl-tabs, .cl-ung { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .cs-gfoot--flush { padding-left: 0; padding-right: 0; }
  .cl-rg-body { padding: var(--space-xs) var(--space-lg) var(--space-lg); }
  .cs-gh { display: none; }
  .cs-g > summary, .cs-nosite .cs-g > summary { grid-template-columns: 24px minmax(0, 1fr) 20px; grid-template-areas: "cb name chev" "cb meta meta"; gap: var(--space-2xs) var(--space-md); padding: var(--space-md) var(--space-lg); align-items: start; }
  .cs-g > summary .cl-cb-hit { grid-area: cb; }
  .cs-g > summary .cs-gname { grid-area: name; }
  .cs-g > summary .cl-chev { grid-area: chev; }
  .cs-g > summary .cs-gmeta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--fs-sm); color: var(--text-dim); }
  .cs-g > summary .cs-c-size, .cs-g > summary .cs-c-freq, .cs-g > summary .cs-site { display: none; }
  .cl-gbody { padding: var(--space-md) var(--space-lg) var(--space-lg); }
  .cs-hist-list li { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-sm) var(--space-lg); }
  .cs-hist-list .cs-hist-n { display: none; }
  .cs-hist-h { padding: var(--space-md) var(--space-lg); }
  .cs-hist .sem-hist-loading, .cs-hist .sem-hist-error { margin: var(--space-md) var(--space-lg); }
  .cs-newrun .btn { width: 100%; justify-content: center; }
  .cs-keys { display: none; }
  .cl-toast-area { bottom: calc(var(--space-4xl) + var(--space-lg)); }
  .cl-est-bar { display: flex; position: sticky; bottom: 0; z-index: var(--z-sticky); justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius); border: 1px solid var(--accent); background: var(--bg-surface); box-shadow: var(--shadow-lg); }
  .cl-est-bar-t { font-size: var(--fs-xs); color: var(--text-dim); }
  .cl-est-bar-t b { display: block; font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
  .cl-est-bar .btn { min-height: 44px; }
  .cl-est-bar-why { display: block; font-size: var(--fs-xs); color: var(--yellow); }
  .cl-est-bar .cl-bar-off { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
  .cl-state { padding: var(--space-lg); }
}
@media (max-width: 480px) {
  .cs-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .cs-tb-sel { width: 100%; }
  .cs-tb-sel select { flex: 1 1 0; min-width: 0; }
  .cs-seg-sub { display: none; }
  .cs-ung-tb .pos-search { max-width: none; flex-basis: 100%; }
  .cs-ung-tb .btn { width: 100%; justify-content: center; }
  .cl-share-link { flex-direction: column; }
  .cl-stopurls li { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-stopurls .cl-n { display: none; }
}

/* Касание (≤640): чекбоксы — зона ≥44px; у строки группы зона уходит в поля summary,
   не заходя в колонку названия (клик по названию раскрывает группу) */
@media (max-width: 640px) {
  .cl-cb-hit { width: 44px; height: 44px; }
  .cs-g > summary, .cs-nosite .cs-g > summary { grid-template-columns: 32px minmax(0, 1fr) 20px; }
  .cs-g > summary .cl-cb-hit { margin: -11px 0 0 -12px; }
  .cl-q .cl-c-cb { width: 44px; padding: 0; }
  .cl-rg-body .pos-check-line, .cl-est .pos-check-line, .cs-set .pos-check-line { min-height: 44px; }
}

/* Только чтение (share, пример отчёта): без колонки чекбоксов */
.cl-readonly .cs-gh > :first-child { display: none; }
.cl-readonly .cs-gh, .cl-readonly .cs-g > summary { grid-template-columns: minmax(0, 1fr) 64px 104px minmax(0, 240px) 20px; }
.cl-readonly.cs-nosite .cs-gh, .cl-readonly.cs-nosite .cs-g > summary { grid-template-columns: minmax(0, 1fr) 64px 104px 20px; }
@media (max-width: 768px) {
  .cl-readonly .cs-g > summary, .cl-readonly.cs-nosite .cs-g > summary { grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "name chev" "meta meta"; }
}

/* Горизонтальная прокрутка вкладок: затухание края = «есть ещё» */
.cl-fade-r { mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); }
.cl-fade-l { mask-image: linear-gradient(to left, black calc(100% - 40px), transparent); }
.cl-fade-l.cl-fade-r { mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); }

/* Сенсорный ввод: справка по клавишам не нужна */
@media (pointer: coarse) {
  .cs-keys, .btn .cl-kbd { display: none; }
}