/* Страница /chto-sluchilos/: мастер «Что случилось?» (скрипт — assets/js/p-chto-sluchilos.js). */
.cs-alarm{margin-top:0}
.cs-alarm a{color:var(--ink);font-size:18px;font-weight:800;white-space:nowrap;text-underline-offset:3px}
.cs{padding:clamp(20px,3vw,32px);margin:0 0 12px}
.cs-js{display:none}
.js .cs-js{display:block}
.land-main .cs .cs-q{font-size:clamp(20px,2.6vw,26px);margin:0 0 8px;line-height:1.2}
.cs-q:focus{outline:none}
.cs-hint{color:var(--muted);font-size:15px;margin-bottom:4px}

/* варианты ответа */
.cs-opts{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
[data-cs-start] .cs-opts{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cs-opt{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;width:100%;height:100%;text-align:left;
  padding:14px 16px;border-radius:0;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.cs-opt b{font-weight:700;font-size:15.5px;line-height:1.35}
.cs-opt small{grid-column:1;font-size:14px;color:var(--muted);line-height:1.4;margin-top:2px}
.cs-opt svg,.cs-opt .cs-arr{grid-column:2;grid-row:1 / span 2;color:var(--volt-d);flex-shrink:0}
.cs-opt:hover{border-color:var(--acc-ink);transform:translateY(-1px)}
.cs-opt-danger{border-color:var(--signal);background:var(--warn-wash)}
.cs-opt-danger svg{color:var(--warn-ink)}
.cs-opt-danger:hover{border-color:var(--warn-ink);background:var(--warn-wash)}

/* полоса: ваши ответы, назад, сначала */
.cs-bar{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.cs-path{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:14px;color:var(--muted);flex:1;min-width:200px}
.cs-path li+li::before{content:"→";margin:0 6px;color:var(--smoke)}
.cs-path li:last-child{color:var(--ink);font-weight:600}
.cs-ctl{display:flex;gap:6px}
.cs-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:0;background:#fff;color:var(--ink);
  font-weight:600;font-size:14px;line-height:1.3;cursor:pointer;text-align:left}
.cs-btn:hover{border-color:var(--acc-ink)}
[data-cs-back] svg{transform:scaleX(-1)}

/* итог */
.cs-lvl{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:0;margin-bottom:10px}
.cs-h3{font-size:16px;margin:22px 0 8px}
.cs-now{margin:0;padding-left:22px}
.cs-now li{margin-bottom:6px;padding-left:2px}
.cs-now li::marker{font-weight:800;color:var(--volt-d)}
.cs-res-danger .cs-now li::marker{color:var(--bad)}
.cs-res-danger .cs-now{font-weight:600;color:var(--ink)}
.cs-why{font-size:15px}
.cs-next{border-radius:0;padding:18px 20px;margin-top:22px}
.cs-next b{display:block;color:#fff;font-size:15.5px;margin-bottom:4px}
.cs-next p{color:var(--smoke);font-size:15px;margin-bottom:14px}
.cs-call{display:flex;flex-wrap:wrap;gap:8px}
.cs-call .btn-dark{background:var(--dark-mid);border-color:var(--line-d)}
.cs-112{color:#FF8A6B}
.cs-jumps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.cs-jumps-t{font-size:14px;color:var(--muted);font-weight:600;margin-right:2px}
.cs-links{margin:0;padding-left:20px}
.cs-links li{margin-bottom:4px}
.cs-links a{color:var(--volt-d);font-weight:600}
.cs-foot{margin-top:20px;font-size:14px;color:var(--muted)}

.cs-in{animation:cs-in .35s var(--ease) both}
@keyframes cs-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:560px){
  .cs-call .btn{width:100%}
  .cs-ctl{width:100%}
  .cs-ctl .cs-btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cs-in{animation:none}
  .cs-opt,.cs-btn{transition:none}
  .cs-opt:hover{transform:none}
}
/* фирменный вид: фаски, рамки внутренней тенью (clip-path срезает обычную рамку и обводку фокуса) */
.cs-opt,.cs-btn,.cs-lvl,.cs-next{--c:var(--c-xs);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.cs-opt{--c:var(--c-m);border:0;box-shadow:inset 0 0 0 1px var(--line)}
.cs-opt:hover{box-shadow:inset 0 0 0 2px var(--acc-ink);background:var(--acc-wash)}
.cs-opt-danger{box-shadow:inset 0 0 0 1px var(--signal),inset 4px 0 0 var(--signal)}
.cs-opt-danger:hover{box-shadow:inset 0 0 0 2px var(--warn-ink),inset 4px 0 0 var(--signal)}
.cs-btn{border:0;box-shadow:inset 0 0 0 1px var(--steel)}
.cs-btn:hover{box-shadow:inset 0 0 0 2px var(--acc-ink);background:var(--acc-wash)}
.cs-opt:focus-visible,.cs-btn:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--acc-ink)}
.cs-next{--c:var(--c-m);background:var(--grip),var(--black);box-shadow:inset 4px 0 0 var(--acc-hi)}
.cs-next :focus-visible{outline-color:var(--acc-hi)}
.cs-lvl{background:var(--black);color:#fff}
.cs-res-danger .cs-lvl{background:var(--bad);color:#fff}
.cs-res-warn .cs-lvl{background:var(--warn-wash);color:var(--warn-ink);box-shadow:inset 0 0 0 1px var(--signal)}
.cs-res-info .cs-lvl{background:var(--acc-wash);color:var(--acc-ink)}