@media (max-width: 1100px) {
  .home-grid { grid-template-columns: 1fr; }
  .recent-row { grid-template-columns: repeat(2, 1fr); }
  .apps { grid-template-columns: repeat(3, 1fr); }
  .main.with-panel { grid-template-columns: minmax(0, 1fr); }
  .main.with-panel .panel { position: fixed; right: 8px; top: 8px; bottom: 8px; width: 340px; border-radius: var(--r-lg); box-shadow: var(--sh-modal); z-index: 45; }
  /* Here the panel floats over the page, so it opens for a selection only, not for the folder itself. */
  .main.with-panel .panel.place { display: none; }
  .flow { grid-template-columns: 1fr; }
  .flow-r { display: none; }
  .file-page { grid-template-columns: 1fr; }
  .file-side { display: none; }
}
@media (max-width: 960px) {
  /* The brand kit stacks before its colors get squeezed (the sidebar is still showing here). */
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .brand-grid > :first-child { max-width: 360px; }
  .brief-layout { grid-template-columns: minmax(0, 1fr); }
  .brief-layout .rail { position: static; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { margin: 0; border-radius: 0; }
  .pad { padding: 20px 16px 64px; }
  .lhead, .lrow { grid-template-columns: 28px minmax(0, 1fr) 76px; }
  .lhead > :nth-child(3), .lhead > :nth-child(4), .lhead > :nth-child(6), .lrow > :nth-child(3), .lrow > :nth-child(4), .lrow > :nth-child(6) { display: none; }
  .skills, .notes, .brand-grid, .type-spec, .connect-hero { grid-template-columns: 1fr; }
  .apps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-feature { grid-template-columns: 1fr; }
  .settings { grid-template-columns: 1fr; }
  .set-nav { display: none; }
}
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  .hide-sm { display: none !important; }
  .sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 65; background: var(--canvas); transform: translateX(-100%); transition: transform 0.25s var(--ease); box-shadow: var(--sh-modal); }
  .sidebar.open { transform: none; }
  .drawer-scrim { display: block; position: fixed; inset: 0; background: rgb(11 13 18 / 0.3); z-index: 64; animation: fade 0.15s; }
  .main { margin: 0; border-radius: 0; height: 100vh; }
  .topbar { padding: 0 10px; }
  .hello { flex-direction: column; align-items: flex-start; }
  .hello .actions { margin-left: 0; }
  .recent-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sk-grid { grid-template-columns: 1fr; }
  .sk-f-visual { display: none; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connect-hero img { display: none; }
  .trow { grid-template-columns: minmax(0, 1fr) auto auto !important; }
  .invest-card { flex-wrap: wrap; }
  .invest-card > div { flex: 1 1 160px !important; }
  .trow > :nth-child(3), .trow > :nth-child(4) { display: none; }
  .set-row { flex-wrap: wrap; }
  .set-row > div:first-child { flex-basis: 180px; }
  .set-row .ctl { max-width: 100%; }
  .set-row .ctl .field { max-width: 100%; }
  .profile-top { flex-wrap: wrap; }
  .file-page .stage { padding: 20px 12px 40px; }
  .stage .doc { padding: 32px 24px; }
  .page-h { flex-wrap: wrap; }
  .selbar { bottom: 12px; max-width: calc(100vw - 24px); overflow-x: auto; }
  .proto { right: 8px; bottom: 8px; }
}