@media (max-width: 1120px) {
  .stats, .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-grid, .dash-analysis, .content-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Foldables can expose tablet-sized CSS viewports while retaining touch navigation. */
@media (max-width: 820px), (max-width: 1120px) and (any-pointer: coarse) {
  :root { --topbar-height: 62px; }
  .shell, .shell.sidebar-collapsed { display: block; }
  .rail, .shell.sidebar-collapsed .rail, .shell.sidebar-collapsed .rail.dion-rail {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    inset: 0 auto 0 0;
    z-index: 70;
    width: 84vw;
    max-width: 286px;
    width: min(84vw, 286px);
    height: 100vh;
    height: 100dvh;
    padding: 0 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    box-shadow: var(--shadow-lg);
    transform: translateX(-105%);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
  }
  /* Opening the mobile drawer must override the persisted desktop collapse state. */
  .rail.open, .shell.sidebar-collapsed .rail.open, .shell.sidebar-collapsed .rail.dion-rail.open { transform: translateX(0); }
  .rail > .nav-group, .rail > .rail-foot { flex-shrink: 0; }
  .shell.sidebar-collapsed .nova-brand,
  .shell.sidebar-collapsed .rail.dion-rail .nova-brand { justify-content: flex-start; padding-left: 10px; padding-right: 10px; padding-inline: 10px; }
  /* Explicit selectors also work on Android versions without :is(). */
  .shell.sidebar-collapsed .rail .brand-copy { display: grid; }
  .shell.sidebar-collapsed .rail .nav-title,
  .shell.sidebar-collapsed .rail .nav-label-text,
  .shell.sidebar-collapsed .rail .rail-collapse span,
  .shell.sidebar-collapsed .rail .rail-resources > small,
  .shell.sidebar-collapsed .rail .rail-resource-link span { display: initial; }
  .shell.sidebar-collapsed .rail .rail-resource-link { justify-content: flex-start; padding-left: 10px; padding-right: 10px; padding-inline: 10px; }
  .shell.sidebar-collapsed .nav-link,
  .shell.sidebar-collapsed .rail.dion-rail .nav-link { justify-content: flex-start; padding-left: 10px; padding-right: 10px; padding-inline: 10px; }
  .shell.sidebar-collapsed .rail.dion-rail .nav-link.active::before { left: -14px; }
  .shell.sidebar-collapsed .rail.dion-rail .rail-foot { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .shell.sidebar-collapsed .rail .rail-collapse { justify-content: flex-start; padding-left: 10px; padding-right: 10px; padding-inline: 10px; }
  .shell.sidebar-collapsed .rail .rail-collapse i { transform: none; }
  .rail .nav-link, .rail .rail-resource-link, .rail .rail-collapse { min-height: 44px; touch-action: manipulation; }
  .nav-scrim {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 60;
    display: block;
    visibility: hidden;
    background: rgba(3, 12, 22, .5);
    opacity: 0;
    backdrop-filter: blur(2px);
    transition: opacity var(--ease), visibility var(--ease);
  }
  .rail.open + .nav-scrim { visibility: visible; opacity: 1; }
  .icon-button.mobile-menu, .mobile-nav { display: inline-grid; min-width: 44px; min-height: 44px; touch-action: manipulation; }
}

@media (max-width: 820px) {
  .crumb { display: none; }
  .top, .topbar { padding-inline: 14px; }
  .page { padding: 22px 14px 44px; }
  .page-head, .heading, .dash-intro { display: block; }
  .page-head > :last-child, .heading > :last-child, .dash-live { margin-top: 13px; }
  .filters { flex-wrap: wrap; padding-inline: 13px; }
  .filters .search { flex-basis: 100%; width: 100%; }
  .dash-controls { align-items: stretch; flex-direction: column; }
  .control-group { flex-wrap: wrap; }
  .login-body { display: block; }
  .login-art { display: none; }
  .login-form { min-height: 100vh; min-height: 100dvh; padding: 24px 18px; }
  .table-wrap, .scroll { margin-inline: -1px; padding-bottom: 4px; }
}

@media (max-width: 540px) {
  .stats, .dash-metrics, .quick-grid { grid-template-columns: minmax(0, 1fr); }
  .tools { gap: 6px; }
  .theme-toggle { width: 38px; padding: 0; justify-content: center; }
  .theme-toggle__label { display: none; }
  .language { min-width: 38px; padding-inline: 8px; }
  .tools > .icon-button:not(.mobile-menu) { display: none; }
  .page-head h1, .heading h1 { font-size: 25px; }
  .panel-head, .card-head, .recent-head { align-items: flex-start; padding: 14px; }
  th, td { padding: 12px 11px; }
  .dist-row { grid-template-columns: minmax(78px, 95px) minmax(90px, 1fr) 42px; }
  .modal-content, .dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}

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