/* ==========================================================================
   Responsive layout — desktop / tablet / mobile
   Desktop:  Visualization | Code | Debugger  (side by side)
   Tablet:   Visualization / Code / Debugger  (stacked)
   Mobile:   Visualization / Current Step / Code / Variables / Explanation
   ========================================================================== */

/* Tablet and below: stack the code+debugger work grid */
@media (max-width: 960px) {
  .app-main {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

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

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

  .app-header__nav button {
    padding: var(--space-2) var(--space-3);
  }

  .app-header__tagline {
    display: none;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .app-header {
    padding: var(--space-3) var(--space-3);
    flex-wrap: wrap;
  }

  .app-header__brand {
    font-size: var(--fs-base);
  }

  .app-header__nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

  .app-header__nav button {
    flex: 1;
    text-align: center;
  }

  .progress-pill__track {
    width: 60px;
  }

  .page-title {
    font-size: var(--fs-xl);
  }

  .learn-header {
    flex-wrap: wrap;
  }

  .viz-panel {
    order: 1;
  }

  /* "Current step" summary sits directly under the visualization on mobile */
  .mobile-step-summary {
    order: 2;
    display: block;
  }

  .work-grid {
    order: 3;
  }

  .code-panel {
    order: 1;
  }

  .debugger-panel {
    order: 2;
  }

  .explanation-panel {
    order: 4;
  }

  .controls-panel {
    order: 5;
    justify-content: center;
    text-align: center;
  }

  .controls-panel__buttons {
    justify-content: center;
    width: 100%;
  }

  .phase-card {
    padding: var(--space-3) var(--space-4);
  }

  .phase-panel__grid {
    grid-template-columns: 1fr;
  }
}

.mobile-step-summary {
  display: none;
}