/* STEEP STUDIO — focused phone usability fixes shared across all workspaces. */
@media (max-width: 650px) {
  :where(.shellpro, .work, .columns, .panel, .panelbody, .panel-body, .surface,
    .application, .workspace, .main, .content, .app, .shell) {
    min-width: 0;
    max-width: 100%;
  }

  :where(.leftnav a, .navrail nav a, .rail nav a, .mobile-workspaces a,
    .mobile-nav button, .side-nav a, .sidebar nav a) {
    min-height: 44px;
    touch-action: manipulation;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    min-height: 42px;
    max-width: 100%;
  }

  input[type="range"] {
    min-height: 32px;
    touch-action: pan-y;
  }

  :where(audio, video, canvas, img) {
    max-width: 100%;
  }

  .shellpro .leftnav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 7px 9px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background: #0e1823;
  }

  .shellpro .leftnav .brandname {
    flex: 0 0 auto;
    margin: 0 5px 0 0;
    font-size: 15px;
    white-space: nowrap;
  }

  .shellpro .leftnav > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .shellpro .leftnav .spacer,
  .shellpro .leftnav > small,
  .shellpro .leftnav .steep-credit {
    display: none !important;
  }

  .mobile-workspaces,
  .mobile-nav,
  .side-nav,
  .rail nav,
  .navrail nav {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 360px) {
  .shellpro .leftnav { gap: 4px; padding-inline: 6px; }
  .shellpro .leftnav > a { padding-inline: 8px; font-size: 10px; }
}