/* The application shell becomes an off-canvas layout before its content no longer fits. */
.topbar-actions .utility-button.sidebar-mobile-toggle,
.sidebar-backdrop {
  display: none;
}

@media (max-width: 1023.98px) {
  body {
    min-height: 100dvh;
  }

  body.has-sidebar-open {
    overflow: hidden;
  }

  .topbar {
    height: 3.5rem;
  }

  .topbar-inner {
    min-width: 0;
    margin-left: 0;
    padding-inline: 0.75rem;
  }

  .topbar-brand-banner {
    display: none;
  }

  .topbar-nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar-nav::-webkit-scrollbar {
    display: none;
  }

  .topbar-actions {
    flex: 0 0 auto;
  }

  .topbar-actions .utility-button.sidebar-mobile-toggle {
    display: inline-grid;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0;
  }

  .sidebar-mobile-toggle-icon,
  .sidebar-mobile-toggle-icon::before,
  .sidebar-mobile-toggle-icon::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transition: transform 140ms ease, opacity 140ms ease;
  }

  .sidebar-mobile-toggle-icon {
    position: relative;
  }

  .sidebar-mobile-toggle-icon::before,
  .sidebar-mobile-toggle-icon::after {
    position: absolute;
    inset-inline-start: 0;
  }

  .sidebar-mobile-toggle-icon::before {
    transform: translateY(-0.36rem);
  }

  .sidebar-mobile-toggle-icon::after {
    transform: translateY(0.36rem);
  }

  .layout-shell.is-sidebar-open .sidebar-mobile-toggle-icon {
    background: transparent;
  }

  .layout-shell.is-sidebar-open .sidebar-mobile-toggle-icon::before {
    transform: rotate(45deg);
  }

  .layout-shell.is-sidebar-open .sidebar-mobile-toggle-icon::after {
    transform: rotate(-45deg);
  }

  .sidebar {
    top: 3.5rem;
    width: min(20rem, calc(100vw - 2rem));
    min-height: calc(100dvh - 3.5rem);
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: 1rem 0 2.5rem rgba(0, 0, 0, 0.35);
  }

  .layout-shell.is-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 3.5rem 0 0;
    z-index: 60;
    display: block;
    width: 100%;
    min-height: calc(100dvh - 3.5rem);
    border: 0;
    background: rgba(1, 1, 2, 0.72);
    cursor: default;
  }

  .sidebar-backdrop[hidden] {
    display: none;
  }

  .layout-body,
  .layout-shell.is-sidebar-collapsed .layout-body {
    min-height: 100dvh;
    margin-left: 0;
    padding-top: 3.5rem;
  }

  .sidebar-nav-link,
  .sidebar-nav-child,
  .utility-button {
    min-height: 2.75rem;
  }

  .modal {
    max-height: calc(100dvh - 2rem);
  }

  .table-scroll {
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
  }

  .data-grid th:last-child,
  .data-grid td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--ui-bg-soft);
    box-shadow: -1px 0 0 var(--ui-border);
  }
}

@media (max-width: 767.98px) {
  .topbar-nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .access-page {
    min-height: auto;
    padding-block: 2.5rem;
  }

  .access-terminal-header {
    flex-direction: column;
  }

  .access-gate-hero {
    min-height: auto;
    padding-block: 3rem;
  }

  .access-gate-title {
    max-width: 9ch;
  }

  .access-gate-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .access-gate-button {
    width: 100%;
  }

  .release-hero {
    min-height: auto;
  }

  .release-hero-copy h1 {
    font-size: 2.8rem;
  }

  .release-hero-copy p:not(.public-kicker) {
    font-size: 1rem;
  }

  .release-hero-ledger strong {
    font-size: 3rem;
  }

  .release-empty h2 {
    font-size: 1.4rem;
  }

  .release-summary-title {
    font-size: 1.3rem;
  }

  .release-summary,
  .release-artifact-header {
    flex-direction: column;
  }

  .release-count {
    width: fit-content;
  }

  .release-copy-button,
  .release-pagination a,
  .release-pagination span[aria-disabled="true"] {
    width: 100%;
  }

  .release-pagination > div {
    flex-direction: column;
  }

  .access-gate-index li {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }





  .command-nav-popover::before {
    left: 1rem;
    transform: rotate(45deg);
  }


  .brand-link {
    border-right: 0;
    padding-right: 0;
  }




  .brand-subtitle {
    display: none;
  }

  .topbar-actions {
    gap: 0.45rem;
  }

  .topbar-nav-link {
    padding-inline: 0.55rem;
  }

  .utility-button {
    padding-inline: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .layout-body,
  .public-utility-button,
  .public-nav a,
  .access-submit,
  .access-control,
  .utility-button,
  .sidebar-parent,
  .sidebar-parent-chevron,
  .sidebar-collapse-icon {
    transition: none;
  }

  .sidebar-mobile-toggle-icon,
  .sidebar-mobile-toggle-icon::before,
  .sidebar-mobile-toggle-icon::after {
    transition: none;
  }

  .topbar-nav-link,
  .topbar-nav-child,
  .topbar-nav-menu .utility-chevron {
    transition: none;
  }
}
