/* Страничные стили sovmestimost. */

/* Оценка: число слева, вердикт и полоса справа. */
.score{
  display:flex; align-items:center; gap:24px;
  padding:22px 24px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface);
}
.score-num{ flex:none; display:flex; align-items:baseline; gap:6px; }
.score-num b{
  font-family:var(--f-head); font-weight:600; font-size:52px;
  letter-spacing:-.03em; line-height:1; color:var(--accent-deep);
}
.score-num span{ color:var(--ink-faint); font-size:14px; }
/* min-width:0 — тело лежит во флексе и без этого не сжимается уже своего
   текста, вынося полосу оценки за край на узком экране. */
.score-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.score-verdict{ font-family:var(--f-head); font-weight:600; font-size:20px; letter-spacing:-.01em; }
@media (max-width:520px){
  .score{ flex-direction:column; align-items:stretch; gap:14px; padding:18px; }
  .score-num b{ font-size:42px; }
}

/* Список проверок: иконка, текст, вычтенные баллы. */
.checks{ border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.checks li{ display:flex; align-items:flex-start; gap:14px; padding:16px 22px; border-top:1px solid var(--line); }
.checks li:first-child{ border-top:0; }
.checks .ic{ flex:none; margin-top:2px; }
.checks .is-ok .ic{ color:var(--accent); }
.checks .is-warn .ic{ color:var(--clay); }
.checks li > div{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.checks b{ font-size:16px; font-weight:700; }
.checks p{ color:var(--ink-soft); font-size:15px; }
.score-cost{
  margin-left:auto; flex:none; align-self:center;
  padding:3px 10px; border-radius:var(--r-pill);
  background:var(--clay-soft); color:var(--clay);
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
}
@media (max-width:609px){
  .checks li{ flex-wrap:wrap; padding:14px 16px; }
  /* Вычтенные баллы уходят на свою строку: прижатые вправо, они на узком
     экране отбирали у текста половину ширины. Перенос делает flex-basis,
     а не margin-left:auto — тот лишь двигает элемент внутри строки. */
  .score-cost{ flex-basis:100%; margin-left:34px; align-self:flex-start; }
}