/* ==========================================================================
   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;
  }

  .app-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* 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);
  }

  /* Footer: stack tagline over links, centred, with roomier tap targets. */
  .app-footer {
    flex-direction: column;
    text-align: center;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .app-footer__tagline {
    flex: none;
  }

  .app-footer__meta {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
  }

  .app-footer__link {
    padding: var(--space-2) 2px;
  }

  .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;
  }

  /* Concept Guide's wide 220px label column doesn't fit next to the value
     on narrow phones — stack label above value instead. */
  .concept-guide .worked-example__level {
    flex-direction: column;
    gap: var(--space-1, 4px);
  }

  .concept-guide .worked-example__level-label {
    width: auto;
  }

  .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;
}