/*
 * Reset + базова верстка. 375px-first (SUB_S7_FRONTEND.md §1.4): мобільна
 * колонка — основа, десктоп (1280px) розтягує ту саму колонку в центровану
 * з полями, окремого десктоп-макета немає.
 */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body {
  min-height: 100vh;
  overflow-x: hidden; /* критерій приймання S7 §9.3: жодної горизонтальної прокрутки на 375px */
  font-size: 14px; /* базовий текст застосунку — мінімум 11px (APP_PARITY), .axis лишається винятком 10.5px */
  line-height: 1.4;
}

/* FIX-13a (Б3): не --accent (тепер темніший, підібраний під білий текст
 * на фоні кнопки) — як колір ТЕКСТУ лінка на темному тлі він давав би
 * лише 3.2-4.1:1; --accent-fg лишає світлий відтінок для dark-теми і
 * бере темний (== --accent) для light-теми, docstring tokens.css. */
a { color: var(--accent-fg); text-decoration: none; }
button { font-family: inherit; }

/* фокус клавіатурою — не прибираємо контур, лише стилізуємо (критерій S7-09: кожен компонент з клавіатурним фокусом) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#app {
  position: relative;
  max-width: 390px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  /* та сама колонка, лише центрована з полями (§1.4) — нового десктоп-макета нема */
  #app { max-width: 480px; }
}

/* -- скляна плитка, буквально з app_mock/index.html .glass -- */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--shadow);
  overflow: hidden;
}

/* -- шапка -- */
header.top {
  padding: calc(var(--safe-top) + 16px) 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
header.top .brand { font-size: 20px; margin: 0; font-weight: 800; letter-spacing: -.02em; }
header.top .brand-tagline { font-size: 10.5px; color: var(--faint); letter-spacing: .04em; margin-top: 2px; }
header.top .nav-controls { display: flex; align-items: center; gap: 8px; }

.lang-switch { display: flex; gap: 4px; }
.lang-switch button,
.theme-toggle,
.login-nav-btn {
  background: var(--chip-bg);
  border: 1px solid var(--edge);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
}
.lang-switch button.active {
  background: var(--chip-on-bg);
  color: var(--chip-on-fg);
  border-color: transparent;
}

main {
  flex: 1;
  padding: 0 14px calc(var(--safe-bottom) + 100px);
}

.screen { display: none; }
.screen.active { display: block; }

.section-stub {
  padding: 15px;
  margin-bottom: 13px;
}
.section-stub .section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 6px;
}
.section-stub .section-heading {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}

/* -- нижня таббар (лише на /app) -- */
nav.bottom {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 362px;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  padding: 9px 4px;
  border-radius: 24px;
  background: var(--nav-bg);
  border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(34px) saturate(var(--sat));
  backdrop-filter: blur(34px) saturate(var(--sat));
  box-shadow: inset 0 1px 0 var(--edge-hi), var(--nav-shadow);
}
nav.bottom button {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  color: var(--faint);
  padding: 6px 5px;
  cursor: pointer;
  border-radius: 12px;
}
nav.bottom button.active { color: var(--ink); font-weight: 700; }

.empty-state {
  text-align: center;
  color: var(--faint);
  font-size: 14px;
  padding: 40px 16px;
}
.empty-state a { display: inline-block; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* -- картка TON-гаманця (G2, src/components/wallet_card.js) -- */
.wallet-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.wallet-card-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
}
.wallet-card-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.4;
}
.wallet-card-status {
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin: 0 0 10px;
}
.wallet-card-error {
  font-size: 12.5px;
  color: var(--red);
  margin: 0 0 10px;
  line-height: 1.4;
}
.wallet-card-btn {
  background: var(--chip-on-bg);
  color: var(--chip-on-fg);
  border: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
}
.wallet-card-btn:disabled { opacity: .55; cursor: default; }