/* ─── Responsive — Mobile Reflow ────────────────── */

@media (max-width: 900px) {
  :root {
    --slide-pad-x: 28px;
  }

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

  /* Grids → single column */
  .grid-2, .grid-3, .grid-4,
  .grid-1-2, .grid-2-1 {
    grid-template-columns: 1fr;
  }

  /* Flow → vertical */
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }

  /* Compare → vertical */
  .compare { grid-template-columns: 1fr; }
  .compare-vs { display: none; }

  /* Transform */
  .transform-wrap { flex-direction: column; }
  .transform-src { width: 100%; }
  .transform-outputs { grid-template-columns: 1fr; }

  /* Padlet */
  .padlet { grid-template-columns: 1fr; }

  /* Track grid */
  .track-grid { grid-template-columns: 1fr; }

  /* Big message */
  .big-message { font-size: var(--fs-2xl); }
  .section-cover-title { font-size: var(--fs-3xl); }
  .section-cover-steps { flex-direction: column; align-items: center; }

  /* Code */
  .code-block { font-size: 0.7rem; }

  /* Nav */
  #nav-bar { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
  .nav-tool-btn { display: none; } /* hidden on very small; use keyboard */

  /* Layer diagram */
  .layer-row { grid-template-columns: 1fr; }

  /* Slide cover padding */
  .slide-cover { padding: var(--sp-8) var(--sp-6); }
}

@media (max-width: 600px) {
  :root {
    --slide-pad-x: 16px;
    --slide-header-h: 60px;
  }

  .slide-header { padding: var(--sp-3) var(--sp-4); }
  .slide-title { font-size: var(--fs-lg); }
  .slide-section-tag { display: none; }
  .slide-body { padding: var(--sp-4) var(--sp-4); padding-bottom: calc(var(--slide-nav-h) + var(--sp-6)); }

  .card { padding: var(--sp-4); }
  .card h3 { font-size: var(--fs-lg); }
  .card p, .card li { font-size: var(--fs-sm); }

  .key-box { font-size: var(--fs-base); }
  .key-box.large { font-size: var(--fs-lg); }

  .big-message { font-size: var(--fs-xl); }
  .section-cover-title { font-size: var(--fs-2xl); }
  .cover-sub { font-size: var(--fs-base); }

  .tab-buttons { flex-direction: column; }
  .tab-btn { border-radius: var(--r-md); border-bottom: 1.5px solid var(--c-border); }
  .tab-btn.active { border-color: var(--c-blue-border); }

  .compare-box { padding: var(--sp-4); }
  .step-title { font-size: var(--fs-base); }

  .flow-step-title { font-size: var(--fs-base); }

  .cmp-cell { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); }

  #timer-widget { right: 8px; bottom: 80px; padding: var(--sp-2) var(--sp-3); gap: var(--sp-3); }
  #timer-display { font-size: 1.5rem; min-width: 62px; }
  #timer-label { display: none; }
}