/* ─────────────────────────────────────────────────────────────
   shared.css — общая база для интерактивных демо в web/
   Копируется в проект как web/shared.css и подключается из демо:
       <link rel="stylesheet" href="shared.css">
   Крупные страницы-лонгриды этот файл НЕ подключают: у них свой
   встроенный <style>. Здесь только то, что одинаково во всех демо.
   ───────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#ffffff; --card:#ffffff; --border:#e2e8f0;
  --indigo:#6366f1; --indigo-dk:#4338ca; --indigo-lt:#eef2ff;
  --cyan:#0ea5e9;   --cyan-lt:#e0f2fe;
  --violet:#7c3aed; --violet-lt:#f5f3ff;
  --amber:#f59e0b;  --amber-lt:#fffbeb;
  --green:#10b981;  --green-lt:#ecfdf5;
  --red:#ef4444;    --red-lt:#fef2f2;
  --text:#0f172a;   --muted:#64748b;
}

body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  padding:20px 22px 24px;
}

/* Заголовок демо: одна строка о том, что показывает демо */
h1{font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:800;letter-spacing:-.3px}
.sub{color:var(--muted);font-size:.88rem;margin:2px 0 14px}

/* Доступность */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--indigo-dk);outline-offset:2px
}

/* Ряд пресетов: готовые примеры, с которых начинает зритель */
.presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.row-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-right:4px}
.choice-btn{
  padding:8px 16px;border-radius:10px;border:1px solid var(--border);background:#fff;
  font-family:inherit;font-size:.85rem;font-weight:700;color:var(--muted);cursor:pointer;transition:all .18s;
}
.choice-btn:hover{border-color:#c7d2fe;color:var(--indigo-dk)}
.choice-btn.active{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* Основная сетка: рабочая область + боковая панель итогов */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.main{min-width:0}
.side{display:flex;flex-direction:column;gap:12px}
.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.panel h2{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:8px}

/* Поля ввода */
.field-label{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px}
textarea,input[type="text"]{
  display:block;width:100%;font-family:inherit;font-size:1rem;line-height:1.45;color:var(--text);
  padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;
}
textarea{min-height:68px;resize:vertical}
textarea:focus,input[type="text"]:focus{outline:none;border-color:var(--indigo)}
input[type="range"]{width:100%;accent-color:var(--indigo)}

/* Итоговая мысль демо — всегда внизу, одной фразой */
.takeaway{margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--indigo-lt);border:1px solid #c7d2fe;font-size:.9rem;line-height:1.6;color:#312e81}
.takeaway b{color:var(--indigo-dk)}

/* Числа в таблицах и счётчиках выравниваются по разрядам */
.num{font-variant-numeric:tabular-nums}

@media (max-width:760px){
  body{padding:16px 14px 20px}
  .layout{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}