/* ==========================================================================
   Виджеты модуля «Качество и производительность».
   ========================================================================== */

/* --- Цена анимации ---------------------------------------------------------- */
.pf { padding: var(--s4); align-items: start; }
.pf__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); inline-size: 100%; }
.pf__side h4 { font-size: .95rem; margin-bottom: 2px; }
.pf__hint { font-size: .76rem; color: var(--text-mute); margin-bottom: var(--s2); }
.pf__track {
  position: relative;
  block-size: 190px;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pf__bar {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--i) * 6px + 4px);
  inline-size: 40px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.pf__track[data-mode="fast"] .pf__bar { background: var(--ok); }
.pf__fps {
  margin-top: var(--s4);
  font-family: var(--font-code); font-size: .85rem;
  color: var(--text-soft); text-align: center;
}
.pf__fps[data-level="ok"] { color: var(--ok); }
.pf__fps[data-level="warn"] { color: var(--warn); }
.pf__fps[data-level="bad"] { color: var(--bad); }

/* --- Лента загрузки ------------------------------------------------------------ */
.lt { padding: var(--s4); align-items: start; }
.lt__chart { position: relative; display: grid; gap: var(--s2); inline-size: 100%; }
.lt__row { display: grid; grid-template-columns: 9rem 1fr auto; gap: var(--s3); align-items: center; }
.lt__name { font-family: var(--font-code); font-size: .76rem; color: var(--text-soft); }
.lt__bar-wrap { position: relative; block-size: 16px; background: var(--surface-2); border-radius: 4px; }
.lt__bar { position: absolute; inset-block: 0; border-radius: 4px; opacity: .85; }
.lt__bar.is-blocking { box-shadow: 0 0 0 1.5px var(--bad); }
.lt__note { font-size: .72rem; color: var(--text-mute); white-space: nowrap; }
.lt__paint {
  position: absolute; inset-block: -4px auto; block-size: calc(100% + 8px);
  border-inline-start: 2px dashed var(--ok);
}
.lt__paint span {
  position: absolute; inset-block-start: -1.3em; inset-inline-start: 4px;
  font-size: .68rem; color: var(--ok); white-space: nowrap;
}
.lt__verdict { margin-top: var(--s6); font-size: .88rem; text-align: center; }
.lt__verdict[data-level="ok"] { color: var(--ok); }
.lt__verdict[data-level="warn"] { color: var(--warn); }
.lt__verdict[data-level="bad"] { color: var(--bad); }

/* --- Что слышит читалка ---------------------------------------------------------- */
.ai__list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; align-content: start; }
.ai__item {
  padding: var(--s3);
  background: var(--surface-2);
  border-inline-start: 3px solid var(--ok);
  border-radius: var(--r-sm);
}
.ai__item.is-bad { border-inline-start-color: var(--bad); }
.ai__say { font-size: .92rem; font-weight: 600; }
.ai__tag { font-family: var(--font-code); font-size: .72rem; color: var(--text-mute); }
.ai__problem { margin-top: 4px; font-size: .8rem; color: var(--bad); }
.ai__empty { padding: var(--s4); font-size: .88rem; color: var(--text-mute); }

/* --- Состояния поля ------------------------------------------------------------------ */
.fs { padding: var(--s4); align-items: start; }
.fs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); inline-size: 100%; }
.fs__cell { display: grid; gap: var(--s2); align-content: start; }
.fs__caption { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute); }
.fs__field { display: grid; gap: 4px; position: relative; }
.fs__label { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.fs__input {
  padding: 9px 12px;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.fs__note { font-size: .74rem; color: var(--text-mute); }
.fs__error { font-size: .74rem; color: var(--bad); }

.fs__cell[data-state="hover"] .fs__input { border-color: var(--border-strong); background: var(--surface-3); }
.fs__cell[data-state="focus"] .fs__input { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.fs__cell[data-state="filled"] .fs__input { border-color: var(--ok); }
.fs__cell[data-state="invalid"] .fs__input { border-color: var(--bad); background: var(--bad-soft); }
.fs__cell[data-state="disabled"] .fs__input { opacity: .6; cursor: not-allowed; }
.fs__cell[data-state="readonly"] .fs__input { background: var(--surface-3); color: var(--text-soft); }
.fs__cell[data-state="loading"] .fs__input { padding-inline-end: 34px; }
.fs__spinner {
  position: absolute; inset-inline-end: 10px; inset-block-end: 11px;
  inline-size: 14px; block-size: 14px;
  border: 2px solid var(--border-strong);
  border-block-start-color: var(--accent);
  border-radius: 50%;
  animation: fs-spin .8s linear infinite;
}
@keyframes fs-spin { to { transform: rotate(360deg); } }

/* --- Проверка поддержки ------------------------------------------------------------------ */
.sc { display: grid; gap: var(--s3); }
.sc__badge {
  padding: 4px var(--s3);
  font-size: .78rem; font-weight: 700;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.sc__badge[data-state="ok"] { color: var(--ok); background: var(--ok-soft); }
.sc__badge[data-state="no"] { color: var(--warn); background: var(--warn-soft); }
.sc__badge[data-state="bad"] { color: var(--bad); background: var(--bad-soft); }

@media (max-width: 700px) {
  .pf__pair { grid-template-columns: 1fr; }
  .lt__row { grid-template-columns: 7rem 1fr; }
  .lt__note { grid-column: 2; white-space: normal; }
  .lt__paint { display: none; }
}

/* --- Разбор макета ------------------------------------------------------------- */
.lb { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s4); }
.lb__mock {
  display: grid;
  grid-template-areas:
    "top   top"
    "hero  hero"
    "cards side"
    "card  side"
    "bottom bottom";
  grid-template-columns: 2fr 1fr;
  gap: 6px;
  padding: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.lb__region {
  display: grid;
  gap: 2px;
  padding: var(--s3) var(--s2);
  min-block-size: 52px;
  text-align: start;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.lb__region:hover { border-color: var(--accent); }
.lb__region.is-active { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.lb__region--top { grid-area: top; }
.lb__region--hero { grid-area: hero; min-block-size: 70px; }
.lb__region--cards { grid-area: cards; }
.lb__region--card { grid-area: card; }
.lb__region--side { grid-area: side; }
.lb__region--bottom { grid-area: bottom; }
.lb__region-name { font-size: .76rem; line-height: 1.3; }
.lb__region-tag { font-family: var(--font-code); font-size: .72rem; color: var(--text-mute); }
.lb__region-tag[data-set="1"] { color: var(--ok); }

.lb__panel { display: grid; align-content: start; gap: var(--s3); }
.lb__picker { display: grid; gap: var(--s2); }
.lb__picker-title { font-weight: 700; font-size: .95rem; }
.lb__picker-hint { font-size: .8rem; color: var(--text-mute); }
.lb__tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lb__tags .is-active { color: #fff; background: var(--accent); border-color: transparent; }
.lb__empty { font-size: .88rem; color: var(--text-mute); }

.lb .widget-code, .lb__notes { grid-column: 1 / -1; }
.lb__notes { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.lb__note { font-size: .86rem; color: var(--text-mute); }

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