/* =====================================================================
   Раздел «Правила» (fos/s-rules.js) — panel-desktop §6.13, прототип 25/26.
   ===================================================================== */
.rl-groups{display:flex;flex-direction:column;gap:16px}
.rl-groups:empty{display:none}
.rl-n{font:500 10.5px var(--mono);color:var(--faint);white-space:nowrap}

/* строка категории: название + метка | капсулы людей */
.rl-cat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px;align-items:center;padding:var(--row-py) var(--row-px);
  border-bottom:1px solid var(--line-row)}
.rl-cat:last-child{border-bottom:none}
.rl-cat__l{display:flex;flex-direction:column;min-width:0}
.rl-cat__t{display:flex;align-items:center;gap:6px;font:400 14.5px var(--font);color:var(--ink);min-width:0}
.rl-cat__m{font:500 10.5px var(--mono);color:var(--faint);padding-left:13px}
.rl-caps{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.rl-cap{height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;font:400 13px var(--font);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.rl-cap:hover{border-color:var(--dash);color:var(--ink)}
.rl-cap.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.rl-cap.is-on:hover{background:#17394A;border-color:#17394A;color:#fff}
.rl-cap .g-ico{width:13px;height:13px}
.rl-cap .g-ico svg{stroke-width:2}
.rl-cap[aria-busy="true"]{cursor:progress;opacity:.75}
.rl-none{font:300 13px var(--font);color:var(--soft)}

/* правила-определители */
.rl-rule{display:grid;grid-template-columns:180px minmax(0,1.3fr) 170px 160px 40px;gap:14px;align-items:center;padding:var(--row-py) var(--row-px);
  border-bottom:1px solid var(--line-row)}
.rl-rule > *{min-width:0}
.rl-rule__k{font:400 13px var(--font);color:var(--muted)}
.rl-rule__p{font:400 13px var(--mono);color:var(--ink);overflow-wrap:anywhere}
.rl-rule__c{display:flex;align-items:center;gap:6px;font:400 13px var(--font);color:var(--ink)}
.rl-rule__by{font:500 11px var(--mono);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-del{justify-self:end}
.rl-del:hover{color:var(--coral-ink);border-color:var(--coral-line)}

/* строка добавления */
.rl-add{display:grid;grid-template-columns:180px minmax(0,1.3fr) 170px auto;gap:10px;padding:14px var(--row-px);background:var(--surface-3);margin:0}
.rl-add .g-input{width:100%;min-width:0;font-family:var(--mono)}
.rl-add .g-input::placeholder{color:var(--faint)}
.rl-add__go{font:400 13.5px var(--font);padding:0 16px}
.rl-add__err{grid-column:1/-1;margin:0;font:400 13px var(--font);color:var(--coral-ink)}
.rl-sel{position:relative;display:flex;align-items:center;gap:4px;height:40px;min-width:0;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-field-sm);background:#fff;font:400 13px var(--font);color:var(--ink);cursor:pointer}
.rl-sel > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;font-size:16px;-webkit-appearance:none;appearance:none}
.rl-sel:has(select:focus-visible){border-color:var(--ink)}
.rl-sel.is-bad{border-color:var(--coral-line)}
.rl-caret{flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}

/* ---------- узкое окно (~1024 px): колонки определителей уже, шаблону остаётся место ---------- */
.rl-det{container-type:inline-size}
@container (max-width:899.98px){
  .rl-rule{grid-template-columns:160px minmax(0,1fr) 140px 120px 30px;gap:12px}
  .rl-add{grid-template-columns:160px minmax(0,1fr) 140px auto}
}

/* ---------- телефон (panel-phone §5.7) ---------- */
@media (max-width:860px){
  .rl-groups{gap:12px}
  .g-card.rl-grp,.g-card.rl-det{border-radius:20px}
  .rl-grp .g-card__head,.rl-det .g-card__head{padding:14px 16px}
  .rl-cat{grid-template-columns:1fr;gap:10px;padding:14px 16px;border-bottom-color:var(--line-soft)}
  .rl-cat__t{font-size:15.5px}
  /* капсула: вид 40, зона 44 — невидимый слой (panel-phone §7); между рядами капсул 6 px, слои не наезжают */
  .rl-cap{position:relative;height:40px;padding:0 14px;font-size:14px}
  .rl-cap::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .rl-rule{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k b" "p x" "c x";gap:4px 12px;padding:14px 16px;border-bottom-color:var(--line-soft)}
  .rl-rule__k{grid-area:k;font-size:12.5px;color:var(--soft)}
  .rl-rule__by{grid-area:b;justify-self:end}
  .rl-rule__p{grid-area:p;font-size:14px}
  .rl-rule__c{grid-area:c;font-size:14px}
  .rl-rule > :last-child{grid-area:x;align-self:center}
  .rl-del{width:44px;height:44px;padding:13px}
  .rl-add{grid-template-columns:1fr;padding:16px}
  .rl-sel{height:48px;font-size:16px;border-radius:14px}
  .rl-add .g-input{height:48px;font-size:16px;border-radius:14px}
  .rl-add__go{height:52px;font-size:16px}
}