/* Lightweight mobile refinements for the minimal redesign */

html,
body {
  overflow-x: hidden;
}

/* Vendor stylesheet overrides this container heavily (including display:none on small screens).
   Keep it visible on mobile, but do not force margins/layout globally. */
.smd-layout_main {
  backdrop-filter: none;
  color: inherit;
}

@media (max-width: 768px) {
  .page-shell > .smd-layout_main {
    display: block;
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: min(1140px, calc(100% - 1.2rem));
  }

  .site-nav {
    border-bottom-color: color-mix(in srgb, var(--border-color) 65%, transparent);
  }

  .nav-inner {
    min-height: 3rem;
  }

  .smd-component_dropdown-content {
    right: 0;
    left: auto;
    width: min(330px, 94vw);
  }

  .smd-component_card {
    border-radius: 11px;
  }

  .smd-component_button-large,
  .smd-component_button-medium {
    min-height: 42px;
  }

  .tk-toast-container {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    top: auto;
  }

  .tk-toast {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .nav-brand span {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tk-page-title {
    font-size: 1.2rem;
  }
}

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