/* Portfolio integration: small-screen panels. Upstream operations are unchanged. */
.portfolio-mobile-tabs { display: none; }
@media (max-width: 760px) {
  html, body { width: 100%; overflow: hidden; }
  .popover { display: none !important; pointer-events: none !important; }
  #banner { display: none !important; }
  #content-wrapper { height: 100vh !important; height: 100dvh !important; }
  .portfolio-mobile-tabs { display: flex; width: 100%; height: 46px; border-bottom: 1px solid currentColor; }
  .portfolio-mobile-tabs button { flex: 1; min-width: 0; padding: 4px 3px; font: inherit; font-size: 13px; line-height: 1.1; color: inherit; background: transparent; border: 0; cursor: pointer; }
  .portfolio-mobile-tabs button[aria-selected="true"] { font-weight: 700; box-shadow: inset 0 -3px var(--primary); }
  .portfolio-mobile-tabs button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
  #workspace-wrapper { width: 100% !important; height: calc(100% - 46px) !important; top: 46px !important; }
  #workspace-wrapper > .gutter { display: none !important; }
  #workspace-wrapper > #operations, #workspace-wrapper > #recipe, #workspace-wrapper > #IO {
    float: none !important; width: 100% !important; height: 100% !important; min-width: 0 !important;
  }
  body[data-mobile-panel="io"] #operations, body[data-mobile-panel="io"] #recipe,
  body[data-mobile-panel="recipe"] #operations, body[data-mobile-panel="recipe"] #IO,
  body[data-mobile-panel="operations"] #recipe, body[data-mobile-panel="operations"] #IO { display: none !important; }
  #controls-content { transform: none !important; width: 100% !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
  #controls-content .btn { width: auto !important; flex: 1; }
  #controls-content .form-group { width: 100%; margin: 0; }
  #recipe #controls { height: 100px !important; width: 100% !important; }
  #recipe #rec-list { height: calc(100% - 145px) !important; overflow-y: auto; }
  .modal-dialog { margin: 8px !important; max-width: calc(100% - 16px) !important; }
}