/* =====================================================================
   Audiofill — базові стилі
   Підключати після tokens.css. Тут: скидання, типографіка, сітка,
   посилання, зміна мови, поява при прокручуванні.
   Опис: docs/02_design-system.md
   ===================================================================== */
/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg-page); color: var(--text-main);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-heading); text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
section[id] { scroll-margin-top: 96px; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Текстове посилання (кнопки-посилання сюди не входять, тож їхній колір не змінюється) */
.link { color: var(--link); display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.link:hover { color: var(--link-hover); }
.link i { transition: transform var(--t-base) var(--ease-out); }
.link:hover i { transform: translate(2px, -2px); }

/* Зміна мови: текст коротко згасає і з'являється вже перекладеним */
[data-i18n], [data-i18n-html], [data-usd] { transition: opacity var(--t-fast) linear; }
.is-lang-switching [data-i18n], .is-lang-switching [data-i18n-html], .is-lang-switching [data-usd] { opacity: 0; }

/* ---------- Поява при прокручуванні ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal] [data-reveal-item] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms), transform var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms); }
.js [data-reveal].is-in [data-reveal-item] { opacity: 1; transform: none; }

/* Посилання «перейти до змісту» для клавіатури: видно лише у фокусі */
.skip { position: absolute; left: var(--gutter); top: -80px; z-index: var(--z-toast); padding: 12px 18px; border-radius: var(--r-md); background: var(--action); color: var(--text-on-accent); font-weight: 600; transition: top var(--t-base) var(--ease-out); }
.skip:focus { top: 12px; }

/* Атрибут hidden ховає елемент завжди, навіть якщо компонент задає свій display */
[hidden] { display: none !important; }

/* =====================================================================
   Без стандартних елементів браузера
   Усе, що браузер домальовує сам (стрілки в числових полях, смуги
   прокручування, хрестик у пошуку, маркер розкриття, жовта заливка
   автозаповнення), прибрано або замінено на елементи в стилі сайту.
   ===================================================================== */
html { background: var(--bg-page); color-scheme: dark; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(35, 241, 190, 0.3); color: var(--text-main); }

/* Смуги прокручування: прокручування працює, самих смуг не видно */
* { scrollbar-width: none !important; -ms-overflow-style: none; }   /* !important — щоб жоден компонент не повернув смугу */
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Числові поля: без стрілок */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Пошук: без хрестика й лупи браузера */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; display: none; }

/* Текстові поля: без «вушка» для розтягування — поле саме росте разом із текстом */
textarea { resize: none; field-sizing: content; max-height: 60vh; overflow-y: auto; }
input, textarea, select, button { -webkit-appearance: none; appearance: none; border-radius: 0; }

/* Автозаповнення: без жовтої чи білої заливки */
input:-webkit-autofill, textarea:-webkit-autofill { -webkit-text-fill-color: var(--text-main); box-shadow: 0 0 0 100px var(--bg-raised) inset; caret-color: var(--text-main); transition: background-color 9999s; }

/* Розкривні блоки: без трикутника браузера */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Вибір файлу: кнопка в стилі сайту */
input[type="file"] { color: var(--text-muted); font-size: var(--fs-small); border: 0; background: none; padding: 0; min-height: 0; }
input[type="file"]::file-selector-button { height: 40px; margin-right: var(--sp-3); padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: transparent; color: var(--text-main); font: 600 var(--fs-small) var(--font-text); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); }
input[type="file"]::file-selector-button:hover { background: rgba(233, 243, 253, 0.05); border-color: var(--text-secondary); }

/* Сайт на весь екран телефона («Додати на початковий екран»): відступи під виріз і смужку жестів */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); overscroll-behavior-y: none; }