/* ==========================================================================
   Виджеты модуля «Архитектура стилей».
   ========================================================================== */

/* --- Тренажёр имён ---------------------------------------------------------- */
.bn { display: grid; gap: var(--s4); }
.bn__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.bn__title { font-size: 1.05rem; }
.bn__head .btn { margin-inline-start: auto; }
.bn__rows { display: grid; gap: var(--s4); }
.bn__row { display: grid; gap: var(--s2); }
.bn__label { display: grid; gap: 1px; font-size: .88rem; }
.bn__label b { color: var(--accent-text); }
.bn__label span { font-size: .8rem; color: var(--text-mute); }
.bn__notes { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bn__notes .check { padding: 5px var(--s3); font-size: .84rem; }
.bn__good { font-size: .84rem; color: var(--ok); }
.bn__good code { color: inherit; }

/* --- Токены и темы ------------------------------------------------------------ */
.tt__tokens { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.tt__token { display: flex; align-items: center; gap: var(--s3); }
.tt__token input[type="color"] {
  inline-size: 40px; block-size: 32px; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
}
.tt__token span { display: grid; gap: 1px; }
.tt__token code { font-size: .76rem; color: var(--text); }
.tt__token i { font-style: normal; font-size: .72rem; color: var(--text-mute); }

.tt { padding: var(--s5); }
.tt__demo { inline-size: 100%; }
.tt__card {
  display: grid;
  gap: 8px;
  max-inline-size: 320px;
  margin-inline: auto;
  padding: 18px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.tt__card-title { margin: 0; font-size: 1.05rem; color: var(--color-text); }
.tt__card-text { margin: 0; font-size: .86rem; color: var(--color-muted); }
.tt__card-price { margin: 0; font-weight: 700; color: var(--color-accent); }
.tt__row { display: flex; gap: 8px; }
.tt__btn {
  flex: 1; padding: 9px; font: inherit; font-size: .85rem;
  color: var(--color-surface); background: var(--color-accent);
  border: 0; border-radius: 999px;
}
.tt__btn--danger { background: var(--color-danger); }
.tt__note { margin-top: var(--s4); font-size: .82rem; color: var(--text-mute); text-align: center; }

/* --- Sass и результат ----------------------------------------------------------- */
.sass { display: grid; gap: var(--s3); }
.sass__pair, .ac2__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.sass__side, .ac2__side { margin: 0; display: grid; gap: var(--s2); min-width: 0; }
.sass__side figcaption, .ac2__side figcaption {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-mute);
}
.sass__side pre, .ac2__side pre {
  margin: 0; padding: var(--s3);
  background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow-x: auto;
}
.sass__side code, .ac2__side code { font-size: .76rem; line-height: 1.6; color: var(--tok-val); white-space: pre; }
.sass__note { font-size: .88rem; color: var(--text-soft); }
.sass__note b { color: var(--warn); }

/* --- Компоненты против утилит ------------------------------------------------------ */
.ac2 { display: grid; gap: var(--s4); }
.ac2__stats { display: flex; flex-wrap: wrap; gap: var(--s5); }
.ac2__stats span { font-size: .84rem; color: var(--text-mute); }
.ac2__stats b { font-family: var(--font-head); font-size: 1.3rem; color: var(--accent-text); display: block; }
.ac2__verdict { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.ac2__verdict h5 { margin-bottom: var(--s2); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); }
.ac2__verdict ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .86rem; color: var(--text-soft); }
.ac2__verdict div:first-child li::marker { color: var(--ok); }
.ac2__verdict div:last-child li::marker { color: var(--bad); }

@media (max-width: 720px) {
  .sass__pair, .ac2__pair, .ac2__verdict { grid-template-columns: 1fr; }
}