/* ===== MODULE 15.51 — RESPONSIVE SHELL ===== */
/* Layout-only responsive rules. No card FX, no 3D transforms. */

@layer base {
  :root {
    --app-safe-x: clamp(14px, 3vw, 40px);
    --app-safe-y: clamp(14px, 2.5vw, 32px);
    --app-max-width: 1440px;

    --tap-target-min: 44px;
    --mobile-nav-height: 72px;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    overflow-x: hidden;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }
}

@layer opening {
  .app-shell,
  .app-layout,
  .page-shell,
  .view-shell {
    width: 100%;
    max-width: var(--app-max-width);
    margin-inline: auto;
  }

  .page-shell,
  .view-shell {
    padding-inline: var(--app-safe-x);
  }

  .panel,
  .card-panel,
  .collection-panel,
  .inspect-panel,
  .opening-panel {
    max-width: 100%;
  }

  .collection-grid,
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }

  @media (max-width: 1100px) {
    .collection-grid,
    .cards-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    }

    .inspect-layout,
    .collection-layout {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 760px) {
    .page-shell,
    .view-shell,
    .opening-content {
      padding-inline: var(--app-safe-x);
    }

    .collection-grid,
    .cards-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(138px, 100%), 1fr));
      gap: 12px;
    }

    .sidebar,
    .app-sidebar {
      width: 100%;
      max-width: 100%;
    }

    button,
    .btn,
    .nav-item,
    .tab-button {
      min-height: var(--tap-target-min);
    }
  }

  @media (max-width: 480px) {
    :root {
      --app-safe-x: 12px;
      --app-safe-y: 12px;
    }

    .collection-grid,
    .cards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal,
    .dialog,
    .inspect-modal {
      width: calc(100vw - 24px);
      max-width: calc(100vw - 24px);
    }
  }
}