/* ── СПІЛЬНІ КОМПОНЕНТИ: сайт і застосунок ─────────────────────────────────
   Вантажиться ОДРАЗУ ПІСЛЯ shared/tokens.css і там, і там
   (site/templates/_base.html, site/templates/auth_page.html, index.html).

   Навіщо. До 2026-09-23 кнопка була оголошена тричі: site/site.css,
   css/core/02_shell.css і ще раз у css/ui_motion.css. Три файли по-своєму
   описували ту саму річ, і «той самий бурштин, той самий радіус» трималось
   лише на пам'яті того, хто правив. Тут — УСТРІЙ кнопки, логотипа й поля:
   з чого вони складаються. Числа кожна поверхня дає своїми змінними.

   Як читати. Кожне значення — змінна `--btn-*`. Запасне значення після коми
   — це режим «Operate» (застосунок): там змінні не задані, і кнопка бере
   існуючі токени застосунку (--ctl-*, --fs-*, --btn-bg з core/01_base.css).
   Сайт (режим «Persuade», більші кнопки-пігулки) задає свої `--btn-*` у
   site.css на самому `.btn` — саме на елементі, а не на :root, бо смуги
   сайту перевизначають --fg/--accent локально (.sec-amber, .sec-cream), і
   змінна, обчислена на :root, їх би не побачила.

   🛑 Що сюди НЕ кладемо:
     • рух (transition, transform під натиском, тіні-глибина) — це
       css/ui_motion.css у застосунку й блок «кнопки» в site.css на сайті;
     • варіанти, що є лише в одній поверхні (.btn-soft/.btn-outline —
       застосунок, .btn-ic — сайт) — вони лишаються у своїх файлах.
   🛑 Нова змінна чи клас — спершу grep по всьому frontend/. Назва
   --brand-ink уже одного разу означала в застосунку БУРШТИН, і збіг
   перефарбував усе тло в жовте. */

/* ── Кнопка ───────────────────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--btn-gap, 7px);
  box-sizing: border-box; cursor: pointer;
  height: var(--btn-h, var(--ctl-h));
  padding: var(--btn-pad-y, 0) var(--btn-pad, var(--ctl-pad));
  border: 1px solid var(--btn-border, transparent);
  border-radius: var(--btn-radius, var(--ctl-radius));
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 var(--btn-fs, var(--fs-13))/var(--btn-lh, normal) var(--sans);
  letter-spacing: var(--btn-tracking, var(--ctl-tracking));
}
/* Наведення — щабель заливки (застосунок) або світліша рамка (сайт). */
.btn:hover{
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover, transparent);
}
.btn:disabled{ opacity: .5; cursor: not-allowed; }

.btn-sm{
  height: var(--btn-h-sm, var(--ctl-h-sm));
  padding: var(--btn-pad-y-sm, 0) var(--btn-pad-sm, var(--ctl-pad-sm));
  font-size: var(--btn-fs-sm, var(--fs-12));
  border-radius: var(--btn-radius-sm, var(--ctl-radius-sm));
}
/* Велика — лише на сайті (герой, тарифи). Застосунок її не вживає; запасні
   значення — звичайна кнопка, щоб випадковий клас нічого не зламав. */
.btn-lg{
  height: var(--btn-h-lg, var(--btn-h, var(--ctl-h)));
  padding: var(--btn-pad-y-lg, var(--btn-pad-y, 0)) var(--btn-pad-lg, var(--btn-pad, var(--ctl-pad)));
  font-size: var(--btn-fs-lg, var(--btn-fs, var(--fs-13)));
}

/* Головна дія — суцільний бурштин. Градієнт-перелив поверх нього в
   застосунку малює ui_motion.css (це глибина, а не колір). */
.btn-primary{
  background: var(--btn-primary-bg); background-image: none;
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border, transparent);
}
.btn-primary:hover{
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border, transparent);
  filter: var(--btn-primary-filter-hover, none);
}
.btn-primary:active:not(:disabled){
  background: var(--btn-primary-bg-active, var(--btn-primary-bg));
  color: var(--btn-primary-fg-active, var(--btn-primary-fg));
}

.btn-ghost{ background: transparent; }
.btn-ghost:hover{ background: var(--btn-ghost-bg-hover, var(--fill-1)); }

.btn-danger{ color: var(--btn-danger-fg); background: var(--btn-danger-bg); border-color: transparent; }
.btn-danger:hover{ background: var(--btn-danger-bg-hover); }

/* ── Логотип ──────────────────────────────────────────────────────────────
   Один знак на весь продукт: пара файлів img/brand/socialos-logo-ondark.svg
   і …-onlight.svg (дві барви, тож `currentColor` не покриє, а зовнішній SVG
   не бачить наших змінних). Розмітка — site/templates/_logo.html (шапка,
   підвал, сторінка входу) і її копія в index.html, яку звіряє тест
   backend/tests/test_brand_assets.py. Висоту кожна поверхня задає
   змінною --logo-h: смуга сайту 72px, застосунку 56px. */
.logo-svg{ display: none; height: var(--logo-h, 26px); width: auto; }
[data-theme="dark"] .logo-svg.on-dark,
[data-theme="light"] .logo-svg.on-light{ display: block; }
/* Без атрибута теми (перший кадр до скрипта) показуємо темний: він і є
   типовим, і на місці знака не блимне порожнеча. */
html:not([data-theme]) .logo-svg.on-dark{ display: block; }

/* ── Поле вводу (.inp) ───────────────────────────────────────────────────
   Досі теж потрійне: core/10_money.css (основа), skin.css (40px, заливка
   замість рамки) і ui_rollout.css (фокус). Тут — злитий стан, який і так
   перемагав у каскаді; числа виміряні, а не вибрані.
   Сайт має власні поля (.lead-form, .auth-field) з іншою геометрією
   «вітрини» і цього класу не вживає. */
.inp{
  width: 100%; max-width: 100%; min-height: 40px;
  background: var(--fill-1); color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 13px; font: 500 var(--fs-13)/1.4 var(--sans);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.inp::placeholder{ color: var(--text-mute); }
.inp:hover{ background: var(--fill-2); border-color: transparent; }
.inp:focus{ outline: none; border-color: var(--accent); background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--accent-edge-hi); }
.inp:disabled{ opacity: .55; cursor: not-allowed; }

select.inp{
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                     linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
select.inp:hover{ border-color: var(--border-hover); }
select.inp:focus{ outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-t-wash-3); }
textarea.inp{ min-height: 92px; line-height: 1.55; }