/* Калькуляторы SkillMagnet - встраиваемый блок.
   Используется и на /yandex-direct/, и внутри статей раздела.
   Все классы с префиксом smc-, чтобы не пересекаться с guides.css. */

.smc {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin: 30px 0;
}
.smc-head { margin-bottom: 18px; }
.smc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 var(--serif); letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.smc-eyebrow .smc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.smc-title { font: 800 clamp(19px, 2.2vw, 24px)/1.25 var(--serif); margin: 0 0 6px; letter-spacing: -.01em; }
.smc-sub { font: 400 14px/1.6 var(--serif); color: var(--muted); margin: 0; }

.smc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.smc-f label { display: block; font: 600 12px/1.3 var(--serif); color: var(--muted); margin-bottom: 6px; }
.smc-f select, .smc-f input[type=number] {
  width: 100%; padding: 11px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font: 500 15px/1.2 var(--serif); appearance: none;
}
.smc-f select:focus, .smc-f input:focus { outline: none; border-color: var(--border-strong); }
.smc-hint { font: 400 11px/1.45 var(--serif); color: var(--dim); margin-top: 5px; }

.smc-scen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; margin-top: 20px; }
.smc-s { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; background: var(--panel-2); }
.smc-s.mid { border-color: var(--border-strong); background: var(--tldr-bg); }
.smc-s .smc-tag { font: 700 10px/1 var(--serif); letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
.smc-s.mid .smc-tag { color: var(--accent); }
.smc-s .smc-big { font: 800 clamp(21px, 2.8vw, 28px)/1.1 var(--serif); margin: 10px 0 3px; letter-spacing: -.02em; }
.smc-s .smc-unit { font: 400 12px/1.4 var(--serif); color: var(--muted); }
.smc-s .smc-row {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 0;
  border-top: 1px solid var(--hairline); font: 500 12px/1.4 var(--serif); margin-top: 10px;
}
.smc-s .smc-row span:first-child { color: var(--muted); font-weight: 400; }

.smc-note {
  margin-top: 16px; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--tldr-bg); font: 400 13px/1.6 var(--serif);
}
.smc-note b { color: var(--accent); }
.smc-note.warn { border-color: rgba(255, 170, 80, .45); background: rgba(255, 170, 80, .08); }
.smc-note.warn b { color: #ffb861; }
[data-theme="light"] .smc-note.warn { border-color: rgba(190, 110, 0, .4); background: rgba(255, 170, 80, .14); }
[data-theme="light"] .smc-note.warn b { color: #9a5b00; }

.smc-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 18px; }
.smc-mini div { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 13px; background: var(--panel-2); }
.smc-mini .smc-k { font: 400 11px/1.3 var(--serif); color: var(--muted); }
.smc-mini .smc-v { font: 800 19px/1.2 var(--serif); margin-top: 4px; letter-spacing: -.01em; }

.smc-verdict {
  margin-top: 18px; padding: 15px 17px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--tldr-bg); font: 500 14px/1.6 var(--serif);
}
.smc-verdict.bad { border-color: rgba(255, 120, 120, .5); background: rgba(255, 120, 120, .08); }
.smc-verdict .smc-vt { font: 800 14px/1.3 var(--serif); margin-bottom: 5px; color: var(--accent); }
.smc-verdict.bad .smc-vt { color: #ff8f8f; }
[data-theme="light"] .smc-verdict.bad { border-color: rgba(190, 40, 40, .4); background: rgba(255, 120, 120, .12); }
[data-theme="light"] .smc-verdict.bad .smc-vt { color: #b52020; }

.smc-more { margin-top: 16px; font: 400 13px/1.6 var(--serif); color: var(--muted); }
.smc-more a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(198, 244, 81, .3); }
.smc-more a:hover { border-bottom-color: var(--accent); }

.smc-slider { margin-top: 4px; }
.smc-slider input[type=range] { width: 100%; accent-color: var(--accent); height: 24px; }
.smc-sval { font: 800 clamp(21px, 3vw, 30px)/1.1 var(--serif); letter-spacing: -.02em; margin: 2px 0; }
.smc-scale { display: flex; justify-content: space-between; font: 400 11px/1 var(--serif); color: var(--dim); }

@media (max-width: 640px) { .smc { padding: 18px 15px; border-radius: var(--radius); } }