/* ============================================================
   COMPONENTS — кнопки, карточки, бейджи, прогресс, теория
   ============================================================ */

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 18px;
  min-height: 44px;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--line); border-color: var(--fg-4); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn--primary {
  background: var(--acid);
  border-color: var(--acid);
  color: #000;
}
.btn--primary:hover:not(:disabled) { background: #dfff4d; border-color: #dfff4d; }

.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--fg-2); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-2); color: var(--fg); }

.btn--danger { background: transparent; border-color: var(--fail-dim); color: var(--fail); }
.btn--danger:hover:not(:disabled) { background: var(--fail); border-color: var(--fail); color: #fff; }

.btn--sm { padding: 7px 12px; min-height: 34px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn__key {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  opacity: .65;
  font-weight: 500;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.btn-row--end { justify-content: flex-end; }
.btn-row__spacer { flex: 1; }

/* ---------- Бейджи ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--line-2);
  color: var(--fg-3);
  white-space: nowrap;
}
.badge--ok      { color: var(--ok);      border-color: var(--ok-dim);   background: rgba(41,224,122,.08); }
.badge--fail    { color: var(--fail);    border-color: var(--fail-dim); background: rgba(255,59,48,.08); }
.badge--warn    { color: var(--warn);    border-color: var(--warn-dim); background: rgba(255,179,0,.08); }
.badge--acid    { color: var(--acid);    border-color: var(--acid-dim); background: var(--acid-glow); }
.badge--cyan    { color: var(--cyan);    border-color: var(--cyan-dim); background: rgba(0,229,255,.08); }
.badge--magenta { color: var(--magenta); border-color: #7a1547;         background: rgba(255,45,149,.08); }
.badge--lock    { color: var(--lock);    border-color: var(--line-2); }
.badge--solid   { background: var(--acid); color: #000; border-color: var(--acid); font-weight: 800; }

/* ---------- Прогресс-бар ---------- */
.pbar {
  height: 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pbar__fill {
  height: 100%;
  background: var(--acid);
  transition: width .5s var(--ease);
}
.pbar--done .pbar__fill { background: var(--ok); }
.pbar--locked .pbar__fill { background: var(--line-3); }

/* Терминальный прогресс: ████████░░ */
.pbar-ascii {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: -.06em;
  color: var(--acid);
  white-space: nowrap;
}
.pbar-ascii__empty { color: var(--line-2); }
.pbar-ascii--done  { color: var(--ok); }
.pbar-ascii--locked { color: var(--lock); }

/* ---------- Карточка ---------- */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: var(--sp-5);
}
.card--flat { background: transparent; }
.card--inset { background: var(--bg-inset); }

/* ---------- Метрики (дашборд) ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.metric {
  background: var(--bg-1);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.metric__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.metric__value {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.metric__value--acid { color: var(--acid); }
.metric__value--fire { color: var(--orange); }
.metric__sub { font-size: var(--fs-xs); color: var(--fg-4); }

/* ---------- Теория ---------- */
.prose {
  max-width: var(--read-max);
  color: var(--fg-2);
}
.prose h3 {
  color: var(--fg);
  font-size: var(--fs-h3);
  margin: var(--sp-6) 0 var(--sp-3);
}
.prose > *:first-child { margin-top: 0; }
.prose strong { color: var(--fg); }
.prose ul, .prose ol { color: var(--fg-2); }

/* Блок «Что это / Зачем / Как» */
.tblock { margin-bottom: var(--sp-5); }
.tblock__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.tblock__label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--acid);
  flex-shrink: 0;
}

/* ---------- Callout ---------- */
.callout {
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--fg-4);
  background: var(--bg-1);
  padding: var(--sp-4);
  margin: var(--sp-5) 0;
  font-size: var(--fs-sm);
  max-width: var(--read-max);
}
.callout__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  color: var(--fg);
}
.callout__icon { font-size: 1rem; line-height: 1; }

.callout--why     { border-left-color: var(--cyan); }
.callout--why     .callout__title { color: var(--cyan); }
.callout--mistake { border-left-color: var(--fail);    background: rgba(255,59,48,.045); }
.callout--mistake .callout__title { color: var(--fail); }
.callout--real    { border-left-color: var(--violet); }
.callout--real    .callout__title { color: var(--violet); }
.callout--tip     { border-left-color: var(--acid); }
.callout--tip     .callout__title { color: var(--acid); }
.callout--warn    { border-left-color: var(--warn);    background: rgba(255,179,0,.045); }
.callout--warn    .callout__title { color: var(--warn); }

/* ---------- Код ---------- */
.codeblock {
  margin: var(--sp-4) 0;
  border: 1px solid var(--line-2);
  background: var(--bg-inset);
  max-width: 100%;
}
.codeblock__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
}
.codeblock__lang {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.codeblock__caption { font-size: var(--fs-xs); color: var(--fg-4); margin-left: auto; }
.codeblock__copy {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--fg-3);
  font-size: var(--fs-xxs);
  font-family: var(--font-mono);
  padding: 2px 7px;
  margin-left: auto;
}
.codeblock__copy:hover { color: var(--acid); border-color: var(--acid-dim); }
.codeblock__caption + .codeblock__copy { margin-left: var(--sp-2); }

.codeblock pre {
  margin: 0;
  padding: var(--sp-4);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.6;
  tab-size: 2;
}
.codeblock code { color: var(--fg-2); background: none; border: 0; padding: 0; white-space: pre; }

.codeblock--bad  { border-color: var(--fail-dim); }
.codeblock--bad  .codeblock__head { background: rgba(255,59,48,.1); border-color: var(--fail-dim); }
.codeblock--good { border-color: var(--ok-dim); }
.codeblock--good .codeblock__head { background: rgba(41,224,122,.1); border-color: var(--ok-dim); }

/* Подсветка синтаксиса (собственная, лёгкая) */
.tok-com { color: var(--fg-4); font-style: italic; }
.tok-str { color: #b8e986; }
.tok-num { color: var(--orange); }
.tok-kw  { color: var(--magenta); font-weight: 600; }
.tok-fn  { color: var(--cyan); }
.tok-tag { color: var(--magenta); }
.tok-att { color: var(--acid); }
.tok-sel { color: var(--acid); }
.tok-prop{ color: var(--cyan); }
.tok-typ { color: var(--violet); }

/* ---------- Таблица ---------- */
.table-wrap { overflow-x: auto; margin: var(--sp-4) 0; border: 1px solid var(--line-2); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 420px; }
.dtable th, .dtable td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--line); }
.dtable th {
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
  white-space: nowrap;
}
.dtable tr:last-child td { border-bottom: 0; }
.dtable td { color: var(--fg-2); vertical-align: top; }
.dtable code { white-space: nowrap; }

/* ---------- Живое демо (iframe) ---------- */
.demo {
  margin: var(--sp-4) 0;
  border: 1px solid var(--line-2);
  max-width: var(--read-max);
}
.demo__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.demo__dot { width: 8px; height: 8px; background: var(--ok); border-radius: 50%; }
.demo iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
}

/* ---------- Пустое состояние ---------- */
.empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  border: 1px dashed var(--line-2);
  color: var(--fg-3);
}
.empty__icon { font-size: 2.5rem; display: block; margin-bottom: var(--sp-4); opacity: .5; }
.empty h3 { color: var(--fg-2); margin-bottom: var(--sp-2); }