/* Mobile polish: slightly larger original transparent brand, continuous and clearer panel outlines,
   and a visible gap between the right node panel and the bottom playback bar. */
@media (max-width: 900px), (max-height: 520px) {
  #app .commandbar .brand-lockup--image > img {
    width: clamp(165px, 45vw, 232px) !important;
    max-height: 44px !important;
  }
  @media (max-width: 420px) {
    #app .commandbar .brand-lockup--image > img {
      width: 152px !important;
      max-height: 40px !important;
    }
  }
  #app .commandbar,
  #app .route-overview,
  #app .sandbox-console,
  #app .legend,
  #app #node-detail.node-detail,
  #app .playback {
    border: 1px solid rgba(103, 190, 190, .48) !important;
    box-shadow: 0 0 0 1px rgba(42, 119, 124, .12) !important;
  }
  /* One continuous outline around the header; do not suppress its bottom edge. */
  #app .commandbar,
  #app .commandbar.v76-fit,
  #app .commandbar.v76-stack {
    border-bottom: 1px solid rgba(103, 190, 190, .48) !important;
    margin-bottom: 10px !important;
  }
  /* Keep the right archive panel separated from both header and playback bar. */
  #app #node-detail.node-detail {
    bottom: calc(var(--v140-playback-h, 64px) + 8px) !important;
  }
}
