/* QA fix N2 — mobile / small-screen optimization (v2.5).
   Loaded last; desktop layout unchanged. Stacks the shell, collapses multi-column grids to one,
   makes the Nimbus/AI panels full-width, and scrolls tables. Targets ≤860px and ≤480px. */
@media (max-width: 860px) {
  /* shell: sidebar becomes a horizontal, scrollable nav strip above the content */
  .appwrap .body { flex-direction: column; }
  .side, .side.collapsed { width: auto !important; flex-direction: row; align-items: center; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; border-right: 0; border-bottom: 1px solid var(--n-line); padding: 8px 10px; }
  .side #nav { display: flex; flex-direction: row; gap: 4px; }
  .side .nav-grp { display: none; }
  .side .foot { display: flex; flex-direction: row; gap: 4px; margin-top: 0; border-top: 0; padding-top: 0; margin-left: auto; }
  .nav-i { white-space: nowrap; padding: 7px 10px; }
  .nav-i.collapsed .lbl, .side.collapsed .lbl { display: inline; }
  .collapse-btn { display: none; }

  /* top bar wraps; search drops to its own row */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 9px 12px; }
  .tsearch { order: 5; flex: 1 1 100%; max-width: none; }
  .app-chip .ac-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .prof-meta { display: none; }

  /* content + generic multi-column grids → single column */
  .main { padding: 14px 12px; }
  .content { padding: 0; }
  .grid { grid-template-columns: 1fr !important; }
  .c2-body, .kb-body { grid-template-columns: 1fr; }
  .c2-grid, .cp-grid { grid-template-columns: 1fr; }
  .kb-files { grid-template-columns: 1fr; }
  .c2-nimbus, .kb-ai { position: static; }

  /* manuscript editor stacks: doc then Nimbus panel; hide the outline rail */
  .cv-wrap { flex-direction: column; }
  .cv-outline { display: none; }
  .cv-scroll { padding: 18px 12px 70px; }
  .cv-paper { padding: 22px 16px; }
  .cv-nimbus, .cv-nimbus.collapsed { width: 100% !important; border-left: 0; border-top: 1px solid var(--n-line); }

  /* wide tables scroll horizontally instead of overflowing */
  table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .c2-mets { grid-template-columns: 1fr; }
  .cv-paper { padding: 18px 12px; }
  .cv-doc h1 { font-size: 23px; }
  .kb-dials { gap: 6px; }
}