/* The site inside Telegram (Mini App). Everything is scoped to .is-tma, which tma.js sets only when Telegram opened the page.
   Telegram draws its own header, so ours goes; a tab bar takes its place at the bottom, on the section roots only. */

.tabbar { display: none; }

.is-tma {
  --header-h: var(--tg-content-safe-area-inset-top, 0px);          /* 0 in the usual window; the space under Telegram's bar in full screen */
  --tab-h: 62px;
  --safe-b: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --view-h: var(--tg-viewport-stable-height, 100svh);
}

.is-tma .site-header, .is-tma .menu-panel, .is-tma .skip { display: none !important; }
.is-tma body { overscroll-behavior-y: none; }
.is-tma .grain { animation: none; inset: 0; }                          /* a moving overlay is the first thing a phone webview drops */

/* ---- tab bar ---- */
.is-tma .tabbar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-header);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch;
  height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: oklch(0.14 0.045 18 / 0.96); border-top: 1px solid var(--wine-700);
}
.is-tma[data-tab="inner"] .tabbar { display: none; }
.tabbar a {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 48px; padding-top: 2px;
  font: 500 11px/1.2 var(--font-body); letter-spacing: 0.01em; color: var(--bone-faint); text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--bone); }
.tabbar a[aria-current="page"] svg { stroke: var(--accent); }
.tabbar a:active { transform: scale(0.94); }
.tabbar .tab-ask { color: var(--accent); }
.tabbar .tab-ask svg { width: 38px; height: 38px; padding: 8px; border: 1px solid var(--accent); border-radius: 50%; }
.tabbar .tab-ask span { display: none; }

/* ---- room for the bar, and the real height of the Telegram window ---- */
.is-tma main { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 16px); }
.is-tma[data-tab="inner"] main { padding-bottom: calc(var(--safe-b) + 16px); }
.is-tma .hero { min-height: calc(var(--view-h) - var(--tab-h) - var(--safe-b)); }
.is-tma .develop-stage { height: var(--view-h); }
.is-tma .atlas-stage { height: calc(var(--view-h) - var(--header-h) - 6vh); }
.is-tma .page-head { padding-top: calc(var(--header-h) + clamp(28px, 7vw, 56px)); }
.is-tma .service { padding-top: calc(var(--header-h) + 16px); }

/* Nothing sticks under a header that is not there. */
.is-tma .service-card, .is-tma .split-lead, .is-tma .sample-context, .is-tma .offer .panel, .is-tma .checkout-aside, .is-tma .review-editor,
.is-tma .account-side, .is-tma .how-grid > h2 { position: static; }

/* ---- footer: the documents and the disclaimer stay (they are required), the rest is the site's own navigation ---- */
.is-tma .site-footer { margin-top: 48px; padding: 32px 0 calc(var(--tab-h) + var(--safe-b) + 24px); }
.is-tma[data-tab="inner"] .site-footer { padding-bottom: calc(var(--safe-b) + 24px); }
.is-tma .footer-brand, .is-tma .site-footer nav[aria-label="Направления"], .is-tma .site-footer nav[aria-label="Информация"] { display: none; }
.is-tma .footer-grid { grid-template-columns: 1fr; gap: 24px; }
.is-tma .footer-legal { padding-top: 20px; }

/* ---- forms and controls: bigger hit areas, no hover remnants ---- */
.is-tma .btn { min-height: 48px; }
.is-tma .toasts { bottom: calc(var(--tab-h) + var(--safe-b) + 12px); }
.is-tma[data-tab="inner"] .toasts { bottom: calc(var(--safe-b) + 12px); }

/* ---- welcome screen (first open: accept the documents) ---- */
.tg-welcome { display: grid; gap: 20px; max-width: 520px; }
.tg-welcome-who { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--wine-800); }
.tg-welcome-who strong { font: 400 var(--fs-h3)/1.1 var(--font-display); }
.tg-welcome-who span { color: var(--bone-faint); font: 400 13px/1.4 var(--font-mono); }