/* ============================================================================
   /analiz-raboty/ — живой расчёт.
   Слева отметки со счётчиками и полосами, справа четыре крупных показателя.
   Полоса двойки красная: в справке это единственное число, на которое смотрят
   в первую очередь.
   ========================================================================= */

.and { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }

.and__inputs { display: flex; flex-direction: column; gap: 10px; }
.and__row { display: grid; grid-template-columns: 34px 30px 34px 30px 1fr 52px; align-items: center; gap: 8px; }
.and__row-lbl { font-weight: 600; color: var(--lp-text); }
.and__row-val { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lp-text); }

.and__step {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 1.05rem;
  border: 1px solid var(--lp-border); background: var(--lp-surface); color: var(--lp-text);
  transition: background .15s var(--lp-ease), border-color .15s var(--lp-ease);
}
.and__step:hover { background: color-mix(in srgb, var(--lp-primary) 12%, transparent); border-color: var(--lp-primary); }

.and__bar { display: block; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--lp-border) 60%, transparent); overflow: hidden; }
.and__bar-fill { display: block; height: 100%; width: 0; background: var(--lp-primary); transition: width .35s var(--lp-ease); }
.and__bar-fill.is-bad { background: #d94a4a; }
.and__row-pct { text-align: right; font-size: .8rem; color: var(--lp-muted); font-variant-numeric: tabular-nums; }

.and__out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.and__cell {
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-lg); padding: 12px 14px;
  background: color-mix(in srgb, var(--lp-primary) 7%, transparent);
}
.and__cell-v { display: block; font-size: 1.7rem; line-height: 1.15; color: var(--lp-primary); font-variant-numeric: tabular-nums; }
.and__cell-n { display: block; font-size: .78rem; color: var(--lp-muted); margin-top: 2px; }

.and__note { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--lp-muted); }
.and__status { grid-column: 1 / -1; margin: 0; }

@media (max-width: 760px) {
  .and { grid-template-columns: 1fr; }
}