/*
 * Каркас сторінки й типографіка.
 *
 * Розміри — з design_handoff_spilno_v3/components.md, де вони дані в dp.
 * У вебі dp = px: Telegram WebView уже масштабує все за щільністю екрана,
 * тож перерахунок дав би подвійне збільшення.
 */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--sp-page);
  color: var(--sp-text);
  font-family: var(--sp-font-body);
  font-size: 15px;
  line-height: 1.45;
  font-weight: var(--weight-bodyRegular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* Каркас застосунку — те, що всередині вікна Telegram і має наше тло. */
.sp-app {
  min-height: 100dvh;
  background: var(--sp-canvas);
  padding-top: var(--sp-safe-top);
  padding-bottom: var(--sp-safe-bottom);
}

.sp-screen {
  padding-inline: var(--space-screenX);
}

.sp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-stackGap);
}

/* Типографіка. Display — Unbounded, решта — Onest. */
.sp-display-l,
.sp-display-m,
.sp-display-s {
  font-family: var(--sp-font-display);
  font-weight: var(--weight-displayHeavy);
  letter-spacing: -0.9px;
  margin: 0;
}

.sp-display-l {
  font-size: 23px;
  line-height: 1.15;
}

.sp-display-m {
  font-size: 19px;
  line-height: 1.2;
  font-weight: var(--weight-displayBold);
}

.sp-display-s {
  font-size: 17px;
  line-height: 1.2;
  font-weight: var(--weight-displayBold);
}

.sp-body {
  font-size: 15px;
  margin: 0;
}

.sp-caption {
  font-size: 12.5px;
  color: var(--sp-text-muted);
  margin: 0;
}

/*
 * Суми. Табличні цифри обов'язкові: у списку витрат стовпчик сум має
 * стояти рівно, а пропорційні цифри Onest розходяться на «1».
 */
.sp-amount {
  font-family: var(--sp-font-display);
  font-weight: var(--weight-displayHeavy);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.6px;
}

.sp-mono {
  font-family: var(--sp-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sp-debt {
  color: var(--sp-debt);
}

.sp-credit {
  color: var(--sp-credit);
}

.sp-muted {
  color: var(--sp-text-muted);
}

/* Рух. Telegram WebView шанує системну відмову від анімацій — шануємо теж. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}