/* Label Designer — narrow screens: tools along the bottom, panels in a slide-up sheet */
@media (max-width: 1100px) {
  :root { --dock-w: 284px; }
  .tabs { padding: 5px 4px 0; }
  .tab { padding: 0 5px; }
}
@media (max-width: 760px) {
  :root { --menubar-h: 42px; --cb-h: 36px; --ruler: 0px; }
  .only-narrow { display: inline-flex !important; }
  .only-wide { display: none !important; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto var(--cb-h) minmax(0, 1fr) 52px;
    grid-template-areas: 'menu' 'tabs' 'ctrl' 'work' 'tools';
  }
  .brand { font-size: 0; gap: 0; padding-right: 4px; }
  .brand-dot { width: 16px; height: 16px; }
  .mb { height: 32px; padding: 0 8px; }
  .menubar .btn { height: 32px; }
  /* The shared menu bar wraps its tools under the menus here, so the row grows with it instead of covering the tabs. */
  .menubar.smb-bar { height: auto; min-height: var(--menubar-h); padding: 4px 8px; column-gap: 6px; }
  .menubar .smb-menu-b { padding: 4px 6px; }
  .menubar, .ctrlbar { --tlbx-hbtn-h: 32px; }
  .btn.ghost { min-width: 32px; font-size: 16px; }
  .chip { height: 28px; max-width: 40vw; }
  .ctrlbar .sep { display: none; }
  #recInfo { min-width: 48px; }
  .status { display: none; }
  .workspace { grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr); }
  .ruler, .ruler-corner { display: none; }
  .toolbox { flex-direction: row; justify-content: flex-start; padding: 0 6px; gap: 2px; border-right: 0; border-top: 1px solid var(--border-dark); overflow-x: auto; overflow-y: hidden; }
  .tool { width: 44px; height: 44px; }
  .tool-sep { width: 1px; height: 26px; margin: 0 3px; }
  /* the dock is a bottom sheet: shared/ui/sheet.js gives its place, motion and ×; the × sits over the tab row's end */
  .dock { --ssh-z: 70; height: min(62vh, 520px); border-left: 0; background: var(--bg-panel); }
  .ssh-phone .dock > .ssh-x { position: absolute; inset: 2px 2px auto auto; margin: 0; }
  .tabs { padding-top: 8px; padding-right: 48px; border-radius: 12px 12px 0 0; }
  .tab { height: 32px; }
  .row { grid-template-columns: 84px minmax(0, 1fr); }
  .inp, .dock-body select { height: 32px; font-size: 16px; }
  textarea.inp { font-size: 14px; }
  .dlg-cols, .pd { grid-template-columns: minmax(0, 1fr); }
  .dlg-form .row { grid-template-columns: 92px minmax(0, 1fr); }
  .pd-canvas { min-height: 180px; max-height: 34vh; }
  .sui-dlg .inp { font-size: 16px; }
}