/* Mobile (≤ 760px): sidebar becomes a drawer, multi-column views stack vertically */
.menu-btn { display: none; }

@media (max-width: 760px) {
  .layout, .layout--collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40; overflow-y: auto; transform: translateX(-100%); transition: transform .2s; }
  .layout--nav-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
  #collapse-btn { display: none; }
  .main { padding: 12px 14px 20px; }
  .topbar { gap: 10px; }
  .menu-btn { display: inline-flex; margin-right: auto; }
  #invite-btn { padding: 6px 10px; font-size: 13px; }
  .menu--wide, .menu--filter, .menu--lang { width: min(340px, calc(100vw - 28px)); }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { width: 100%; }
  .grid, .mini-grid, .ws-grid { grid-template-columns: 1fr; }
  .bars li { grid-template-columns: 110px 1fr 36px; }
  .modal__panel, .modal__panel--search, .modal__panel--generic, .modal__panel--sm, .modal__panel--md { width: calc(100vw - 24px); }

  /* Player */
  .player-top { padding: 12px 14px; flex-wrap: wrap; }
  .player-body { grid-template-columns: 1fr; }
  .player-main { padding: 0 14px 16px; }
  .player-info h2 { font-size: 20px; }
  .player-side { border-left: 0; border-top: 1px solid var(--border); padding: 0 14px; }
  .player-side__panel { max-height: none; }

  /* Editor: tool rail becomes a horizontal strip above the panel */
  .editor { height: auto; min-height: 100vh; }
  .ed-top { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .ed-top__thumb { display: none; }
  .ed-top__title { font-size: 15px; flex: 1 1 100%; order: -1; }
  .ed-body { flex-direction: column; }
  .ed-rail { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 4px; }
  .ed-rail__btn { flex: none; min-width: 72px; padding: 8px 4px; }
  .ed-rail__btn:hover .ed-rail__tip { display: none; }
  .ed-panel { padding: 12px; overflow: visible; }
  .qe { grid-template-columns: 1fr; height: auto; }
  .qe .ed-preview { order: -1; }
  .qe-thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 2px solid #2e3036; padding: 0 0 8px; }
  .qe-thumbs > li { flex: none; width: 128px; }
  .qe-transcript { overflow: visible; padding-right: 0; }
  .tr, .quiz, .dub, .ann { grid-template-columns: 1fr; height: auto; }
  .timeline { padding: 8px 12px 12px; }
  .timeline__bar { flex-wrap: wrap; }
}