/* Motion */

@keyframes tt-page-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes tt-sheet-in {
  from {
    opacity: 0.72;
    transform: translateY(22px);
  }
}

@keyframes tt-overlay-in {
  from {
    opacity: 0;
  }
}

@keyframes tt-progress-in {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
}

/* Responsive */

@media (max-width: 390px) {
  .page {
    padding-right: 10px;
    padding-left: 10px;
  }

  .toolbar-wrap {
    margin-right: -10px;
    margin-left: -10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .toolbar {
    gap: 5px;
  }

  .tool {
    min-height: 60px;
    font-size: 0.54rem;
  }

  .overview-hero,
  .stats-hero,
  .overview-card,
  .turnus-card,
  .turnus-hero {
    padding: var(--tt-space-3);
  }

  .overview-hero > strong {
    font-size: clamp(2.55rem, 13vw, 3.15rem);
  }

  .money {
    font-size: 1.18rem;
  }

  .metric-mini {
    padding: 7px 5px;
  }

  .metric-mini strong {
    font-size: 0.84rem;
  }

  .nav-item {
    font-size: 0.52rem;
  }

  .day-cell {
    min-height: 61px;
  }

  .segment,
  .segment small {
    font-size: 0.42rem;
  }

  .turnus-finance-grid strong,
  .turnus-hero-grid strong {
    font-size: 1rem;
  }
}

@media (min-width: 600px) {
  .page {
    padding-right: var(--tt-space-5);
    padding-left: var(--tt-space-5);
  }

  .toolbar-wrap {
    margin-right: calc(var(--tt-space-5) * -1);
    margin-left: calc(var(--tt-space-5) * -1);
    padding-right: var(--tt-space-5);
    padding-left: var(--tt-space-5);
  }

  .toolbar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .tool {
    min-height: 68px;
  }

  .overview-hero,
  .stats-hero,
  .overview-card,
  .turnus-card {
    padding: var(--tt-space-5);
  }

  .day-cell {
    min-height: 82px;
  }

  .segment,
  .segment small {
    font-size: 0.52rem;
  }

  .mini-day {
    width: min(100%, 22px);
    height: 22px;
    font-size: 0.46rem;
  }
}

@media (min-width: 840px) {
  .app-shell {
    border-right: var(--tt-border-width) solid var(--tt-border-strong);
    border-left: var(--tt-border-width) solid var(--tt-border-strong);
    box-shadow: 0 0 56px rgba(0, 0, 0, 0.42);
  }

  .modal-root.open {
    align-items: center;
    padding: var(--tt-space-6);
  }

  .sheet {
    max-height: calc(100vh - 48px);
    border-bottom: var(--tt-border-width) solid var(--tt-border-strong);
    border-radius: var(--tt-radius-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}