/* ══════════════════════════════════════════════════════════════════
   BASTA · дизайн-система
   Одна шкала отступов, одна шкала радиусов, один набор компонентов.
   Всё остальное собирается только из этого — поэтому блоки и встают
   в ряд, а кнопки выглядят роднёй, а не соседями.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Бумага и чернила ── */
  --paper:#efeeea;          /* тёплый светлый фон, как у печати */
  --paper-2:#e6e4df;
  --card:#f7f6f3;
  --ink:#121212;
  --ink-2:#55534e;
  --ink-3:#8a8781;
  --line:rgba(18,18,18,.12);
  --line-2:rgba(18,18,18,.07);

  /* ── Направления ── */
  --production:#d92d20;
  --development:#2f5fd0;
  --design:#c9971b;
  --marketing:#d96020;
  --acc:#d92d20;
  --acc-rgb:217,45,32;
  --on-acc:#fff;

  --ok:#2f8f5b; --warn:#b8860b; --bad:#c0392b;

  /* ── Шрифты ── */
  --f:'Inter Tight',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* ── Отступы: одна шкала на весь проект ── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:140px;
  --gut:clamp(20px,4vw,72px);     /* поле страницы */
  --max:1480px;

  /* ── Радиусы: всё капсульное ── */
  --r1:8px; --r2:14px; --r3:22px; --r4:32px; --rp:999px;

  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);

  --shadow-1:0 1px 2px rgba(18,18,18,.05);
  --shadow-2:0 8px 28px -12px rgba(18,18,18,.18);
  --shadow-3:0 28px 70px -30px rgba(18,18,18,.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--paper);color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:16px;
  line-height:1.5;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0}
ul,ol{list-style:none}
p{text-wrap:pretty}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:var(--r1)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(18,18,18,.18);border-radius:var(--rp)}
::-webkit-scrollbar-track{background:transparent}

/* ── Типографика ─────────────────────────────────────────────── */
.d1{font-size:clamp(46px,9.2vw,148px);font-weight:600;letter-spacing:-.05em;line-height:.92}
.d2{font-size:clamp(34px,5.6vw,86px);font-weight:600;letter-spacing:-.045em;line-height:.98}
.h1{font-size:clamp(28px,3.6vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.04}
.h2{font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.h3{font-size:clamp(18px,1.5vw,22px);font-weight:600;letter-spacing:-.028em;line-height:1.2}
.h4{font-size:16px;font-weight:600;letter-spacing:-.022em;line-height:1.3}

/* Курсивная антиква в одно слово — приём с референсов */
.em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}

.lab{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
.lead{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.txt{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mut{color:var(--ink-2)} .dim{color:var(--ink-3)}

/* ── Сетка страницы ──────────────────────────────────────────── */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
body:not(.app) .sec{padding-block:clamp(var(--s8),9vw,var(--s10))}
body:not(.app) .sec--tight{padding-block:clamp(var(--s7),6vw,var(--s9))}

/* Голова секции: метка, заголовок, пояснение — всегда одинаково */
.shead{display:grid;gap:var(--s4);margin-bottom:var(--s7);
  grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end}
.shead__t{display:grid;gap:var(--s3)}
@media(max-width:780px){.shead{grid-template-columns:1fr}}

/* ── Кнопки ──────────────────────────────────────────────────── */
/* Капсула с кружком-иконкой справа. Один компонент на весь проект. */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--s3);
  padding:7px 7px 7px 22px;border-radius:var(--rp);
  background:var(--ink);color:var(--paper);
  font-size:15px;font-weight:500;letter-spacing:-.015em;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:background .35s var(--e),color .35s var(--e),
             border-color .35s var(--e),transform .35s var(--e);
  will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn__i{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);
  transition:background .35s var(--e),color .35s var(--e),transform .45s var(--e)}
.btn:hover .btn__i{transform:rotate(-45deg)}
.btn__i svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.btn--acc{background:var(--acc);color:var(--on-acc)}
.btn--acc .btn__i{background:var(--on-acc);color:var(--acc)}
.btn--acc:hover{background:color-mix(in srgb,var(--acc) 86%,#000)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost .btn__i{background:var(--ink);color:var(--paper)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(18,18,18,.04)}

.btn--light{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn--light .btn__i{background:var(--ink);color:var(--paper)}

/* Плоская капсула без кружка — для второстепенных действий */
.btn--plain{padding:11px 20px;gap:var(--s2)}
.btn--sm{padding:5px 5px 5px 16px;font-size:14px}
.btn--sm .btn__i{width:28px;height:28px}
.btn--sm.btn--plain{padding:8px 15px;font-size:13.5px}
.btn--lg{padding:9px 9px 9px 28px;font-size:16.5px}
.btn--lg .btn__i{width:42px;height:42px}
.btn--lg .btn__i svg{width:17px;height:17px}
.btn--wide{width:100%;justify-content:space-between}
.btn[disabled],.btn[aria-busy="true"]{opacity:.45;pointer-events:none}
.btn--bad{background:var(--bad);color:#fff}
.btn--bad .btn__i{background:#fff;color:var(--bad)}

/* ── Капсулы-метки ───────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:var(--s2);
  padding:7px 14px;border-radius:var(--rp);border:1px solid var(--line);
  background:var(--card);font-size:13.5px;color:var(--ink-2);white-space:nowrap;
  transition:border-color .3s var(--e),background .3s var(--e),color .3s var(--e)}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.chip--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.chip--bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.chip--solid{background:var(--ink);color:var(--paper);border-color:transparent}
.chip--acc{background:var(--acc);color:var(--on-acc);border-color:transparent}

/* ── Поверхности ─────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r3);
  transition:border-color .35s var(--e),transform .35s var(--e),box-shadow .35s var(--e)}
.card--pad{padding:clamp(var(--s5),2.2vw,var(--s6))}
.card--hover:hover{border-color:var(--line);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card--flat{background:transparent}
.panel{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r4);
  overflow:hidden}

/* ── Поля ────────────────────────────────────────────────────── */
.fld{position:relative;display:block}
.fld input,.fld textarea,.fld select{
  width:100%;padding:24px 18px 10px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r2);font-size:16px;
  transition:border-color .3s var(--e),background .3s var(--e)}
.fld textarea{min-height:124px;resize:vertical;line-height:1.55}
.fld select{padding-top:17px;padding-bottom:17px}
.fld label{position:absolute;left:18px;top:18px;color:var(--ink-3);pointer-events:none;
  font-size:16px;transform-origin:0 0;
  transition:transform .28s var(--e),color .28s var(--e)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  border-color:var(--ink);background:#fff}
.fld input:focus~label,.fld input:not(:placeholder-shown)~label,
.fld textarea:focus~label,.fld textarea:not(:placeholder-shown)~label{
  transform:translateY(-9px) scale(.68);color:var(--ink-3);letter-spacing:.08em}
.fld--bad input,.fld--bad textarea{border-color:var(--bad)}
.fld__hint{margin-top:var(--s2);font-size:13px;color:var(--ink-3)}

/* ── Шарик направления ───────────────────────────────────────── */
.orb{position:relative;border-radius:50%;flex:none;
  background:
    radial-gradient(40% 36% at 33% 27%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(100% 100% at 68% 78%, color-mix(in srgb,var(--oc,var(--acc)) 55%,#000), transparent 70%),
    var(--oc,var(--acc));
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.28), 0 4px 14px -6px var(--oc,var(--acc))}

/* ── Мелочи ──────────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:var(--s3)}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}
.hr{border:0;border-top:1px solid var(--line-2)}

.empty{padding:var(--s7) var(--s5);text-align:center;color:var(--ink-3);
  border:1px dashed var(--line);border-radius:var(--r3);font-size:15px}

.spin{display:inline-block;width:16px;height:16px;border-radius:50%;
  border:1.8px solid var(--line);border-top-color:var(--ink);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Появление ───────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}
.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}
.rv[data-d="4"]{transition-delay:.28s}
.cut{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.cut>*{display:block;transform:translateY(108%);transition:transform .95s var(--e)}
.cut.in>*{transform:none}

/* ── Уведомление ─────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:var(--s6);translate:-50% 0;z-index:9000;
  padding:14px 24px;border-radius:var(--rp);background:var(--ink);color:var(--paper);
  box-shadow:var(--shadow-3);font-size:14.5px;
  opacity:0;transform:translateY(14px);transition:opacity .3s,transform .4s var(--e)}
.toast.on{opacity:1;transform:none}
.toast--bad{background:var(--bad);color:#fff}

/* ── Модальное окно ──────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:var(--s5);
  background:rgba(18,18,18,.42);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s}
.modal.on{opacity:1;pointer-events:auto}
.modal__b{width:min(640px,100%);max-height:88vh;overflow:auto;background:var(--paper);
  border-radius:var(--r4);padding:clamp(var(--s5),3vw,var(--s7));
  box-shadow:var(--shadow-3);
  transform:translateY(20px) scale(.98);transition:transform .45s var(--e)}
.modal.on .modal__b{transform:none}
.modal__h{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s5)}
.modal__x{margin-left:auto;width:36px;height:36px;border-radius:50%;flex:none;
  border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;
  color:var(--ink-3);transition:border-color .3s,color .3s,background .3s}
.modal__x:hover{color:var(--ink);border-color:var(--ink);background:rgba(18,18,18,.04)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}.cut>*{transform:none}
}