@media (max-width: 900px) {
  .retrieve-card,
  .form-grid,
  .role-grid {
    grid-template-columns: 1fr;
  }

  .retrieve-stage {
    min-height: 390px;
  }

  .retrieve-side {
    border-top: 2px solid var(--fg);
    border-left: 0;
  }

  .admin-shell {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .admin-sidebar {
    position: static;
    overflow-x: auto;
  }

  .admin-sidebar__label {
    display: none;
  }

  .admin-nav {
    display: flex;
    min-width: max-content;
  }

  .preview-panel {
    position: static;
  }

  .system-grid {
    grid-template-columns: 1fr 1fr;
  }

  .data-table {
    table-layout: auto;
  }
}

@media (max-width: 680px) {
  .site-header__inner,
  .page,
  .public-shell,
  .role-gateway__inner,
  .admin-shell {
    width: min(100% - 24px, 1180px);
  }

  .site-header {
    height: 62px;
  }

  .site-header__inner {
    gap: 10px;
  }

  .header-nav a {
    padding: 0 10px;
  }

  .hide-mobile {
    display: none !important;
  }

  .public-main {
    min-height: calc(100vh - 62px);
    padding: 34px 0 48px;
  }

  .system-grid {
    grid-template-columns: 1fr;
  }

  .gateway-header-note {
    display: none;
  }

  .role-gateway {
    min-height: calc(100vh - 62px);
    place-items: start center;
    padding: 38px 0 48px;
  }

  .role-gateway__intro {
    margin-bottom: 26px;
  }

  .role-gateway__intro h1 {
    font-size: clamp(36px, 11vw, 48px);
    max-width: none;
  }

  .role-gateway__inner::before {
    display: none;
  }

  .role-card {
    min-height: 260px;
    gap: 28px;
    padding: 24px;
    box-shadow: 5px 5px 0 var(--fg);
  }

  .gateway-boundary {
    flex-direction: column;
    gap: 6px;
  }

  .public-intro {
    margin-bottom: 26px;
  }

  .public-intro h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .retrieve-stage,
  .retrieve-side {
    padding: 24px;
  }

  .retrieve-stage {
    min-height: 360px;
  }

  .text-input--phrase {
    min-height: 120px;
    align-content: start;
  }

  .result-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .result-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  .copy-feedback {
    min-height: 20px;
    text-align: center;
  }

  .public-footnote {
    flex-direction: column;
    gap: 6px;
  }

  .choice-grid {
    grid-template-columns: 1fr;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .table-wrap {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tr {
    margin-bottom: 12px;
    padding: 8px 14px;
    border: 2px solid var(--fg);
    border-radius: 0;
    background: var(--surface);
    box-shadow: 4px 4px 0 var(--fg);
  }

  .data-table td {
    min-height: 44px;
    display: grid;
    grid-template-columns: 108px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    text-align: left !important;
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 550;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .data-table .phrase-cell {
    width: 100%;
  }

  .data-table td:last-child {
    border-bottom: 0;
  }

}

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