/* «Правила»: строки-объекты белым на холсте рамы, без линий; группы «Работают / На паузе» с итогом справа (el-list-rows-clio).
   Переключатель, поиск, помощник, сегмент — из rule.css, inbox.css, analytics.css (.an__say) и app.css. */
.rl { padding-bottom: 28px; }
.cts__n { color: var(--ink2); font-weight: 400; }
#sayAct { display: contents; } /* кнопка помощника — прямой флекс-элемент, на телефоне на всю ширину */

.rl__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 20px; }
.rl__bar .find { flex: 0 1 360px; margin: 0; }

.rl__g { display: grid; gap: 6px; margin-bottom: 24px; }
.rl__gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 2px; }
.rl__gh h2 { font-size: 15px; font-weight: 500; }
.rl__gh span { color: var(--ink2); font-size: 13px; }

/* сетка строки: название | комментарии | в директ | открыли | изменено | переключатель */
.rl__r, .rl__hd { display: grid; grid-template-columns: minmax(0, 1fr) 104px 88px 80px 52px; align-items: center; gap: 0 12px; }
.rl__hd { padding: 0 16px; color: var(--ink2); font-size: 13px; }
.rl__r { min-height: 72px; padding: 8px 8px 8px 16px; border-radius: var(--r-row); background: var(--panel); transition: background-color var(--t-fast) var(--ease); }
.rl__r:hover { background: var(--ctl); }
.r { text-align: right; }
.rl__name { display: grid; gap: 4px; min-width: 0; padding: 6px 0; text-decoration: none; }
.rl__name b { font-size: 15px; font-weight: 500; }
.rl__name:focus-visible { outline-offset: 2px; border-radius: var(--r-row); }
.rl__trig { color: var(--ink2); font-size: 13px; line-height: 1.7; }
.ig { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tag { display: inline-block; margin-left: 4px; padding: 1px 10px; line-height: 1.45; border-radius: 999px; background: var(--well); color: var(--ink); font-size: 13px; white-space: nowrap; }
.rl__r:hover .tag { background: var(--panel); }
.rl__n { font-size: 15px; }
.rl__pct { font-weight: 500; }
#sayT a { font-weight: 500; text-underline-offset: 3px; }
.rl__m { display: none; }
.rl__m span { white-space: nowrap; }
.rl__r--off .rl__n { color: var(--ink2); }
/* «плохо» — чёрным и весом, красная только точка (вкус владельца) */
.rl__miss { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.rl__miss::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--err); }

.rl__none { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; color: var(--ink2); text-align: center; }

/* пустой раздел: одна карточка по центру, узкая главная капсула (Grok, plantin) */
.rl__empty { display: grid; justify-items: center; gap: 10px; max-width: 440px; margin: 40px auto; padding: 32px 24px; border-radius: var(--r-card); background: var(--panel); text-align: center; }
.rl__empty h2 { font-size: 20px; font-weight: 500; }
.rl__empty p { color: var(--ink2); font-size: 15px; max-width: 34ch; }
.rl__empty .cta { margin-top: 6px; }

@media (max-width: 719px) {
  .rl__hd, .rl__n { display: none; }
  .rl__r { grid-template-columns: minmax(0, 1fr) 52px; grid-template-areas: "name sw" "m sw"; padding-left: 14px; }
  .rl__name { grid-area: name; } .rl__r .sw { grid-area: sw; }
  .rl__m { display: block; grid-area: m; color: var(--ink2); font-size: 13px; padding-bottom: 6px; }
  .rl__bar .find { flex: 1 1 100%; }
  .an__say { flex-wrap: wrap; }
  .an__say p { flex: 1 1 calc(100% - 64px); }
  .an__say .btn { flex: 1 0 100%; }
}

/* десктоп ≥900 в окне: список правил прокручивается внутри, шапка, помощник и поиск стоят на месте */
@media (min-width: 900px) {
  body[data-fit] .rl > * { flex: none; }
  body[data-fit] .rl > #list { flex: 1; min-height: 0; overflow: auto; padding: 2px 4px 2px 0; }
}

/* лист шаблонов: цели, тип, поиск и прокрутка карточек внутри листа */
.sheet--tp { display: grid; gap: 14px; align-content: start; }
.sheet--gallery { display: flex; flex-direction: column; overflow: hidden; }
.sheet--gallery > * { flex: none; min-width: 0; }
.sheet--gallery .find { margin: 0; }
.sheet--gallery .tps { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 8px; }
.tps { display: grid; gap: 4px; margin-inline: -8px; }
.tps--in { animation: tp-in 180ms var(--ease); }
@keyframes tp-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tps--in { animation-duration: 80ms; } }
.tp { display: grid; gap: 2px; min-height: 60px; align-content: center; padding: 10px 8px; border-radius: var(--r-row); color: var(--ink); text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.tp:hover { background: var(--ctl); }
.tp b { overflow-wrap: anywhere; font-size: 15px; font-weight: 500; }
.tp small { color: var(--ink2-onmuted); font-size: 13px; line-height: 1.35; }

/* меню директа: строка «текст, правило, убрать» та же, что у быстрых ответов в редакторе */
.mns, .mn { display: grid; gap: 10px; }
.mns { gap: 22px; }
.mn h3 { font-size: 15px; font-weight: 500; }
#mnSave { justify-self: end; }
.qrow__url { grid-column: 1 / -1; }
.rl .head__acts { flex-wrap: wrap; max-width: 100%; }

/* AI: описание правила над шаблонами и лист «AI-ответы» */
.aib { display: grid; gap: 10px; }
.aib[hidden] { display: none; }
.aib .lbl { margin: 0; }
.aib .cta, #aiSave { justify-self: end; }
#aiSheet textarea.fld { min-height: 72px; }
#aiSheet .qrow textarea.fld { min-height: 52px; }
#aiSheet .qrow { grid-template-columns: minmax(0, 1fr) 44px; }
/* фильтры листа шаблонов переносятся строками: прокрутка вбок срезала последний пункт и на 1440, и на 390 */
#tpGoals, #tpSeg { display: flex; flex-wrap: wrap; overflow: visible; width: fit-content; border-radius: 22px; }
@media (max-width: 599px) { #tpGoals .n, #tpSeg .n { display: none; } }