/* Phone / small-tablet layout. One pane at a time, switched from a bottom bar. Loaded last. */
#mnav, #mmenu { display: none; }
@media (max-width: 760px) {
  html, body { overscroll-behavior: none; }
  /* title bar */
  .titlebar { height: 46px !important; gap: 6px; padding: 0 8px; }
  .logo img { height: 30px !important; }
  .quick, .proj, #projbtn { display: none !important; }
  #mmenu { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; font-size: 20px; border-radius: 6px; color: var(--title-fg); }
  .titlebar .grow { flex: 1; }
  .cloud { margin: 0 4px 0 0; }
  #menus { display: none; }
  body.mmenu-open #menus { display: flex; flex-direction: column; position: fixed; z-index: 90; top: 46px; left: 0; right: 0; max-height: calc(100vh - 46px - 56px); overflow: auto; padding: 6px; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
  body.mmenu-open #menus > div { width: 100%; }
  body.mmenu-open #menus > div > button { width: 100%; text-align: left; padding: 11px 12px; font-size: 15px; }
  body.mmenu-open .menu-pop { position: static; box-shadow: none; border: 0; background: var(--panel2); margin: 0 0 4px; }
  body.mmenu-open .menu-pop button { padding: 11px 12px; font-size: 14px; }
  .menu-pop kbd { display: none; }
  #cloud-pop { top: 52px; }

  /* toolbar scrolls sideways */
  .toolbar { overflow-x: auto; flex-wrap: nowrap; height: 46px !important; padding: 0 6px; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > * { flex: none; }
  .toolbar .tbtn, .toolbar .tool { min-width: 40px; height: 36px; }
  .toolbar .grow, .flowtag, .tinfo { display: none !important; }

  /* one pane at a time */
  .workspace { display: block !important; position: relative; overflow: hidden !important; background: var(--panel); }
  .workspace > .navigator, .workspace > .leftcol, .workspace > .center { display: none !important; height: 100%; width: 100%; overflow: auto; border: 0; }
  body[data-mpane="flow"] .workspace > .navigator { display: block !important; }
  body[data-mpane="src"] .workspace > .leftcol { display: flex !important; }
  body[data-mpane="doc"] .workspace > .center, body[data-mpane="dock"] .workspace > .center { display: flex !important; overflow: hidden; }
  body[data-mpane="doc"] .center > .dock, body[data-mpane="doc"] .center > .splitter { display: none !important; }
  body[data-mpane="dock"] .center > .doc-area, body[data-mpane="dock"] .center > .splitter { display: none !important; }
  .center > .doc-area, .center > .dock { flex: 1 1 auto !important; min-height: 0; }
  .navigator .nav-item { padding: 12px 16px; font-size: 14px; }
  .navigator .fn-h { padding: 10px 16px; }
  .leftcol .sources { min-height: 0; } .leftcol .props { max-height: 40%; }
  .hrow { padding: 8px 12px; }

  /* bottom pane switcher */
  #mnav { display: flex; flex: none; height: 52px; background: var(--panel); border-top: 1px solid var(--border); }
  #mnav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); }
  #mnav button svg { width: 22px; height: 22px; }
  #mnav button.on { color: var(--accent); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); }
  body.no-project #mnav, body.no-project .workspace, body.no-project .toolbar { display: none !important; }

  /* editor and results */
  #tabs { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .dock-tabs { overflow-x: auto; scrollbar-width: none; } .dock-tabs button { flex: none; padding: 10px 14px; }
  .dock-body { -webkit-overflow-scrolling: touch; overflow: auto; }
  .tclin input { font-size: 16px; }
  .CodeMirror { font-size: 14px; }
  .rep-cols { grid-template-columns: 1fr !important; }
  .dock-body table { font-size: 12px; }

  /* waveform: objects strip above the canvas, touch drag pans */
  .wave-tools { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .wave-tools > * { flex: none; }
  .wave-main { flex-direction: column; }
  .objects { width: 100% !important; max-height: 112px; border-right: 0; border-bottom: 1px solid var(--border); }
  .hcell.names, #wnames { width: 96px; } .hcell.vals, #wvals { width: 56px; } #wvals { left: 96px; }
  #wnames > *, #wvals > * { font-size: 11px; }
  #canvas, #ruler { touch-action: none; }
  #hover-info { display: none; }
  #schem-view, #layout-view { touch-action: none; }

  /* wizard and dialogs fill the screen */
  dialog { max-width: 100vw; }
  dialog.wiz, #dlg { width: 100vw !important; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.wiz[open] { display: flex; flex-direction: column; } .wiz-wrap { flex: 1; overflow: auto; flex-direction: column; } #wiz-steps { display: flex; overflow-x: auto; width: auto; padding: 8px; }
  input, select, textarea { font-size: 16px; }

  /* start page */
  .start-inner { padding: 16px 14px 24px; }
  .hero-logo { height: 76px !important; }
  .hero p.tagline { font-size: 14.5px; }
  .chips { gap: 6px; } .chips span { font-size: 11.5px; padding: 3px 10px; }
  .flowc { padding: 18px; }
  .flowc button { width: 100%; padding: 12px; }
  .prow .pacts { opacity: 1; }

  /* status bar */
  .statusbar { height: 24px; font-size: 11px; gap: 8px; padding: 0 8px; }
  #partinfo, #simtime, #pos, .statusbar > span:last-child { display: none; }
}