/* ============================================================
   БИТРИКС24 ИЛИ AMOCRM — ВЕСЫ (30.09.2026)
   Слева отметки, справа коромысло на стойке; чаши висят на нитях и
   остаются вертикальными (контр-поворот). --tilt от −14° до 14°.
   ============================================================ */
.cpk__box{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:"items scale" "items notes" "items verdict";
  gap:18px clamp(28px, 5vw, 90px); align-items:start;
}
.cpk__items{ grid-area:items; list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cpk__it{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  padding:15px 16px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer;
  font-size:clamp(15px, 1.05vw, 17px); line-height:1.4; color:var(--fg);
  transition:border-color .2s, background .2s, transform .15s;
}
.cpk__it:hover{ border-color:rgba(var(--accent-rgb), .45); }
.cpk__it input{ position:absolute; opacity:0; pointer-events:none; }
.cpk__box2{ position:relative; width:22px; height:22px; border-radius:4px; border:1.5px solid var(--accent-line); background:#fff; transition:background .2s, border-color .2s; }
.cpk__box2::after{ content:""; position:absolute; left:6px; top:4px; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .2s cubic-bezier(.3,1.6,.5,1); }
.cpk__it:has(input:checked){ border-color:var(--accent-1); background:var(--accent-wash); }
.cpk__it:has(input:checked) .cpk__box2{ background:var(--accent-1); border-color:var(--accent-1); }
.cpk__it:has(input:checked) .cpk__box2::after{ transform:rotate(45deg) scale(1); }
.cpk__it:has(input:focus-visible){ outline:2px solid var(--accent-1); outline-offset:2px; }
.cpk__it:active{ transform:scale(.99); }

/* весы */
.cpk__scale{ grid-area:scale; position:relative; height:clamp(240px, 22vw, 300px); }
.cpk__beam{
  --tilt:0deg;
  position:absolute; left:6%; right:6%; top:40px; height:6px; border-radius:3px;
  background:linear-gradient(var(--fg), #3a4452);
  transform:rotate(var(--tilt)); transform-origin:50% 50%;
  transition:transform .8s cubic-bezier(.34,1.56,.64,1);
}
.cpk__beam::before{ content:""; position:absolute; left:50%; top:-7px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:var(--accent-1); box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--line); }
.cpk__pan{
  position:absolute; top:3px; width:38%;
  display:grid; justify-items:center;
  transform:rotate(calc(-1 * var(--tilt))); transform-origin:50% 0;
  transition:transform .8s cubic-bezier(.34,1.56,.64,1);
}
.cpk__pan--l{ left:-6%; }
.cpk__pan--r{ right:-6%; }
/* нити */
.cpk__pan::before{ content:""; width:70%; height:70px; border:1.5px solid rgba(22,32,42,.35); border-bottom:0; clip-path:polygon(50% 0, 100% 100%, 0 100%); background:none;
  background:linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(22,32,42,.35) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
             linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(22,32,42,.35) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; border:0; }
.cpk__cup{
  display:flex; align-items:flex-end; justify-content:center; gap:4px;
  width:100%; height:34px; padding-bottom:6px;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:linear-gradient(#fff, var(--surface-2)); border:1.5px solid var(--line); border-top:3px solid var(--fg);
}
.cpk__w{ width:16px; height:0; border-radius:3px 3px 1px 1px; background:var(--accent-1); transition:height .35s cubic-bezier(.3,1.6,.5,1); }
.cpk__w.is-on{ height:16px; }
.cpk__pan b{ margin-top:10px; font:700 15px/1 var(--font); color:var(--fg); }
.cpk__post{ position:absolute; left:50%; top:43px; bottom:22px; width:6px; margin-left:-3px; background:linear-gradient(90deg, #3a4452, var(--fg)); border-radius:3px; }
.cpk__base{ position:absolute; left:50%; bottom:10px; width:120px; height:14px; margin-left:-60px; border-radius:6px 6px 3px 3px; background:var(--fg); }

.cpk__notes{ grid-area:notes; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cpk__notes p{ margin:0; font-size:14px; line-height:1.5; color:var(--fg-lead); }
.cpk__notes b{ display:block; margin-bottom:4px; font-size:15px; color:var(--fg); }
.cpk__verdict{
  grid-area:verdict; margin:0; padding:14px 16px; border-radius:6px; text-align:center;
  background:var(--fg); color:#fff; font:600 clamp(15px, 1.1vw, 17px)/1.3 var(--font);
  transition:background .3s;
}
.cpk__verdict.is-set{ background:var(--accent-1); }

@media (max-width: 900px){
  .cpk__box{ grid-template-columns:1fr; grid-template-areas:"scale" "verdict" "items" "notes"; }
  .cpk__notes{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ .cpk__beam, .cpk__pan{ transition:none; } }