/* «Кто в клубе» (R16, поток I): плашка на доске и окно «Срез клуба». Вид — прототип доски v23 (rezidenty.css,
   раздел «аудитория клуба»). Окно — 1160 px, на экране от 1800 px — 1400 px, на телефоне — во весь экран.
   Движение (R17) — только при prefers-reduced-motion: no-preference; иначе всё сразу на месте. */

/* ===== плашка на странице ===== */
.rz-kp{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px 40px;margin-top:28px;padding:24px 28px;border:1px solid var(--hair);border-radius:4px;background:var(--tint)}
.rz-kp-t p{margin-top:6px;font-size:14px;line-height:1.45;color:var(--muted)}
.rz-kp-f,.rz-klub-f{display:flex;gap:32px}
.rz-kf b{display:block;font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.rz-kf>span{display:block;margin-top:6px;font-size:13px;color:var(--soft)}
.rz-kp-b .lu{width:18px;height:18px;margin-left:8px}
@media (max-width:1100px){.rz-kp{grid-template-columns:1fr auto}.rz-kp-t{grid-column:1/-1}}
@media (max-width:640px){.rz-kp{grid-template-columns:1fr;padding:20px}.rz-kp-f{flex-wrap:wrap;gap:20px 28px}}

/* ===== окно ===== */
.modal:has(.rz-klub){width:min(100%,1160px);padding:40px 36px 36px}
.scrim:has(.rz-klub){align-items:flex-start}
.rz-klub-p{max-width:720px;font-size:15px!important}
.rz-klub .rz-klub-f{margin:16px 0 28px;padding:20px 0;border-block:1px solid var(--hair);gap:56px}
.rz-klub-f .rz-kf b{font-size:44px}
.modal .rz-klub .rz-klub-s{margin-top:20px;font-size:12px;line-height:1.45;color:var(--muted)}

/* восемь плашек */
.rz-ig-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rz-ig-k{padding:20px;border:1px solid var(--hair);border-radius:4px;background:var(--tint)}
.rz-ig-k h3{margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.rz-ig-k.vys{grid-row:span 2}
.rz-ig-p{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rz-ig-p li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 4ch;align-items:center;gap:10px;font-size:14px;color:var(--soft)}
.rz-ig-p span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rz-ig-p i{position:relative;display:block;height:8px;border-radius:2px;background:rgba(241,239,248,.08);overflow:hidden}
.rz-ig-p i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--gold);transform-origin:left;transform:scaleX(var(--d))}
.rz-ig-p b{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap}
.rz-ig-s{display:flex;gap:3px;height:14px;border-radius:2px;overflow:hidden}
.rz-ig-s i,.rz-ig-l i{background:var(--gold)}
.rz-ig-s .oba,.rz-ig-l .oba{background:#8F7240}
.rz-ig-s .b2c,.rz-ig-l .b2c{background:#BEBBCC}
.rz-ig-l{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.rz-ig-l li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft)}
.rz-ig-l li i{flex:none;width:12px;height:12px;border-radius:2px}
.rz-ig-l li>i:empty:not([class]){background:rgba(241,239,248,.2)}
.rz-ig-l b{margin-left:auto;font-weight:700;color:var(--ink)}
.modal .rz-klub .rz-ig-pod{margin-top:12px;font-size:13px;line-height:1.45;color:var(--muted)}
.modal .rz-klub .rz-ig-net{margin-top:0;font-size:15px;line-height:1.5;color:var(--soft)}

/* перекрёстный отбор: строки — кнопки, выбранная подсвечена, невыбранные приглушены */
.rz-kf-r{all:unset;box-sizing:border-box;display:grid;grid-template-columns:inherit;align-items:center;gap:10px;width:100%;margin:-4px -8px;padding:4px 8px;border-radius:3px;cursor:pointer}
.rz-ig-p li:has(.rz-kf-r){display:block}
.rz-ig-p .rz-kf-r{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 4ch;width:calc(100% + 16px)}
.rz-ig-l .rz-kf-r{display:flex;width:calc(100% + 16px)}
.rz-kf-r:hover{background:rgba(241,239,248,.06)}
.rz-kf-r:focus-visible{outline:2px solid var(--focus,var(--gold));outline-offset:1px}
.rz-kf-r[aria-pressed="true"]{background:rgba(199,154,62,.16);box-shadow:inset 2px 0 0 var(--gold)}
.rz-kf-r[aria-pressed="true"] span{color:var(--ink);font-weight:600}
.rz-ig-p li.tusk,.rz-ig-l li.tusk,.rz-ig-s i.tusk{opacity:.38}
.rz-kf-otb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:36px;margin-top:20px}
.rz-kf-otb-t{font-size:13px;color:var(--muted)}
.rz-kf-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px 0 12px;border:1px solid var(--gold);border-radius:3px;background:rgba(199,154,62,.14);font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.rz-kf-chip .lu{width:14px;height:14px;color:var(--gold)}
.rz-kf-chip:hover{background:rgba(199,154,62,.26)}
.rz-kf-chip:focus-visible,.rz-kf-otb .rz-ssl:focus-visible{outline:2px solid var(--focus,var(--gold));outline-offset:2px}
.rz-kf-otb .rz-ssl{padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--gold);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.rz-kf-malo{margin-top:24px;padding:28px;border:1px dashed var(--hair);border-radius:4px}
.rz-kf-malo b{font-size:17px;color:var(--ink)}
.modal .rz-kf-malo p{margin-top:8px;font-size:14px;color:var(--soft)}

@media (max-width:1100px){.rz-ig-g{grid-template-columns:1fr 1fr}}
/* телефон: окно во весь экран */
@media (max-width:640px){
  .scrim:has(.rz-klub){padding:0}
  .modal:has(.rz-klub){width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:56px 20px 24px}
  .rz-ig-g{grid-template-columns:1fr}.rz-ig-k.vys{grid-row:auto}
  .rz-klub .rz-klub-f{flex-wrap:wrap;gap:20px 32px}.rz-klub-f .rz-kf b{font-size:34px}
}
/* очень широкий экран — крупнее и окно 1400 px */
@media (min-width:1800px){
  .rz-kf b{font-size:40px}.rz-kf>span{font-size:14px}
  .modal:has(.rz-klub){width:min(100%,1400px);padding:48px 48px 44px}
  .rz-klub .rz-ig-k{padding:24px}.rz-klub .rz-ig-k h3{font-size:13px}
  .rz-klub .rz-ig-p li,.rz-klub .rz-ig-l li,.rz-klub .rz-kf-r{font-size:16px}
  .rz-klub .rz-ig-p i{height:10px}
  .rz-klub-f .rz-kf b{font-size:56px}.rz-klub-f .rz-kf>span{font-size:15px}
  .modal .rz-klub .rz-ig-pod{font-size:14px}.modal .rz-klub-p{font-size:16px!important}
}

/* ===== движение (R17): плашки по очереди, полосы растут, отрезки «с кем работают» — один за другим ===== */
@keyframes kkVverh{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kkRost{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kkPolosa{from{transform:scaleX(0)}to{transform:scaleX(var(--d))}}
@keyframes kkPlavno{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .rz-kp-b .lu{transition:transform .2s}
  .rz-kp-b:hover .lu{transform:translateX(3px)}
  .rz-kf-r{transition:background .15s}
  .rz-ig-p li,.rz-ig-l li,.rz-ig-s i{transition:opacity .25s}
  .scrim.on .modal:has(.rz-klub){animation:kkVverh .35s cubic-bezier(.22,1,.36,1) both}
  .rz-klub .rz-ig-k{animation:kkVverh .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(120ms + var(--i)*70ms)}
  .rz-klub .rz-ig-p i::after{animation:kkPolosa .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(260ms + var(--i)*70ms + var(--j)*45ms)}
  .rz-klub .rz-ig-s i{transform-origin:left;animation:kkRost .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(300ms + var(--i)*70ms + var(--j)*120ms)}
  .rz-klub .rz-ig-p b,.rz-klub .rz-ig-l b{animation:kkPlavno .4s both;animation-delay:calc(500ms + var(--i)*70ms)}
  /* после отбора — без повторного появления: полосы плавно перетекают к новым значениям (transform, без перерасчёта раскладки) */
  .rz-klub.uzhe .rz-ig-p i::after{transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .rz-klub.uzhe .rz-ig-s i{transition:flex-grow .5s cubic-bezier(.22,1,.36,1),opacity .25s}
  .rz-klub.uzhe .rz-ig-k,.rz-klub.uzhe .rz-ig-p i::after,.rz-klub.uzhe .rz-ig-s i,.rz-klub.uzhe .rz-ig-p b,.rz-klub.uzhe .rz-ig-l b{animation:none}
}