/* responsive.css — Breakpoints: 375 / 768 / 1024 / 1440.
   Strategy: fluid key sizing via clamp() in theme.css does most of the work;
   these rules handle layout reflow and panel collapsing. */

/* Two-column main area on wide screens (keyboard | side panels). */
@media (min-width: 1024px) {
  .layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
    gap: var(--space-3);
    align-items: start;
  }
}

/* Tablet: special-keys panel collapses behind its toggle by default. */
@media (max-width: 1023px) {
  .special-keys[data-collapsible] .special-keys__grid {
    display: none;
  }
  .special-keys[data-collapsible].is-open .special-keys__grid {
    display: grid;
  }
}

/* Mobile: condense, allow horizontal scroll of the keyboard, collapse history. */
@media (max-width: 767px) {
  .app-shell {
    padding: var(--space-2) var(--space-1) var(--space-6);
  }

  .keyboard-scroll {
    padding-bottom: var(--space-1);
  }

  .panel__header {
    flex-wrap: wrap;
  }
}

/* Hide the collapse toggles on large screens where panels are always shown. */
@media (min-width: 1024px) {
  [data-collapse-toggle] {
    display: none;
  }
}