/* Breakpoints per plans/sakura-sync-kawaii-music-git-ui-ux-plan.md §8.1 */

@media (max-width: 1279px) {
  /* Character sidebar + main workspace no longer have room to sit side by
     side under ~1280px without squeezing the 32-step timeline editor back
     into needing a scrollbar (measured while building this: the timeline
     editor's cell width dropped toward ~0px at this width with the
     sidebar still beside it). Stack them instead: character card, then
     the timeline editor, then the two Demo cards, each full width. */
  .studio-grid {
    grid-template-columns: 1fr;
  }
  /* Shrink the lane header (icon + name + description) so more of the
     row's width goes to the 32 step columns, same reasoning as above. */
  .timeline-lane__header {
    width: 96px;
  }
  .timeline-lane__desc {
    display: none;
  }
  .mockup-conflict-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  #topnav {
    padding: var(--space-2) var(--space-4);
    gap: var(--space-3);
  }
  #app-main {
    padding: var(--space-4);
  }
  .status-bar {
    gap: var(--space-2);
  }
  .rhythm-modal {
    max-height: 96vh;
  }

  /* Below this width, the 32 flexible (1fr) columns keep shrinking fast —
     measured with getBoundingClientRect while building this: cell width
     was already down to ~9px at 600px viewport width and ~5px at 480px,
     well before the old 479px breakpoint. That's too small to tell lanes
     apart or tap reliably, so the whole <=767px bucket (not just <=479px)
     falls back to the old fixed-width-cell + horizontal-scroll behaviour
     instead of the fluid grid used at 768px and wider. 768px itself
     (the tablet width this was verified at) stays fluid/scroll-free —
     only this bucket, everything narrower, gets the fallback. */
  .timeline-editor-scroll {
    overflow-x: auto;
  }
  .timeline-editor {
    min-width: fit-content;
  }
  .timeline-lane__cells {
    display: flex;
    flex: 0 0 auto;
  }
  .timeline-cell {
    width: 26px;
    flex-shrink: 0;
  }
}

@media (max-width: 479px) {
  .narrow-screen-hint {
    display: block;
  }
  .rhythm-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  /* Two Demo cards side by side get too narrow to hold the name input +
     buttons comfortably on a phone — stack them instead. */
  .studio-demo-row {
    grid-template-columns: 1fr;
  }
}