/* Vetra 0.3.1.14 - desktop-only navigation/surface unification.
   IMPORTANT: all rules are >= 901px so the approved mobile experience is untouched. */
@media (min-width:901px){
  /* Keep the marketplace control rail visible while the listing feed scrolls.
     The rail keeps its own vertical scrollbar so every filter/action remains reachable. */
  .main-grid{position:relative;align-items:start;grid-template-columns:285px minmax(0,1fr)}
  .main-grid>.sidebar{
    position:fixed!important;
    z-index:48;
    top:calc(var(--topbar,72px) + 12px)!important;
    bottom:16px!important;
    left:max(16px,calc((100vw - 1800px)/2 + 16px));
    width:285px!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    align-self:auto!important;
  }
  .main-grid>.content-area{grid-column:2;min-width:0}

  /* Major desktop destinations become broad single-scroll surfaces instead of
     narrow/nested upper+lower scroll areas. Background remains visible around them. */
  #profileModal .profile-modal,
  #developerHubModal .developer-hub-modal,
  #messageCenterModal .message-center-modal,
  #dashboardModal .dashboard-modal,
  .storefront-public-modal,
  .trust-center{
    width:min(1540px,94vw)!important;
    max-width:1540px!important;
    max-height:92vh!important;
    margin:auto!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  #profileModal .profile-modal>*,
  #developerHubModal .developer-hub-modal>*,
  #messageCenterModal .message-center-modal>*,
  #dashboardModal .dashboard-modal>*{min-width:0;max-width:100%;box-sizing:border-box}

  /* Use the successful mobile Profile navigation pattern on desktop too:
     Overview / Listings / Settings / More. The old horizontal tab rail is removed.
     Existing handlers are reused; no second navigation system is introduced. */
  #profileModal .profile-tabs{display:none!important}
  #profileModal .profile-mobile-action-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.65rem;
    margin:16px 0 18px;
  }
  #profileModal .profile-mobile-action-grid button{
    display:flex;
    align-items:center;
    gap:.7rem;
    min-height:58px;
    padding:.75rem .85rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 94%,var(--brand) 6%),var(--panel));
    color:var(--text);
    text-align:left;
  }
  #profileModal .profile-mobile-action-grid button span{
    display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;
    border-radius:10px;background:rgba(84,198,255,.1);color:var(--brand);font-weight:900
  }
  #profileModal .profile-panel{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    min-width:0!important;
    padding-bottom:1rem;
  }

  /* The existing mobile-sheet component becomes a centered desktop bottom sheet when
     invoked from Profile. This preserves one interaction model across devices. */
  .vetra-mobile-sheet-panel{
    width:min(1180px,92vw)!important;
    max-width:1180px!important;
    max-height:88vh!important;
    margin-inline:auto!important;
    border-radius:22px 22px 0 0!important;
  }
  .vetra-mobile-sheet-content{overflow-y:auto!important;overflow-x:hidden!important}
  .vetra-mobile-sheet-content>*{min-width:0!important;max-width:100%!important}

  /* Developer Hub and User Analytics use available width rather than horizontal scroll. */
  #developerHubModal .developer-hub,
  #developerHubModal #developerHubContent,
  #developerHubModal .user-analytics-shell,
  #developerHubModal .developer-list,
  #developerHubModal section{min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
  #developerHubModal .developer-toolbar{
    display:grid;
    grid-template-columns:minmax(260px,1fr) repeat(4,max-content);
    gap:.55rem;
    align-items:center;
  }
  #developerHubModal .developer-listing-row,
  #developerHubModal .developer-review-row{min-width:0;grid-template-columns:minmax(0,1fr) auto}
  #developerHubModal .developer-listing-row>div:first-child,
  #developerHubModal .developer-review-row>div:first-child{min-width:0;overflow-wrap:anywhere}
  #developerHubModal .developer-row-actions,
  #developerHubModal .dashboard-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
  #developerHubModal .user-analytics-summary,
  #developerHubModal .user-analytics-detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #developerHubModal .user-analytics-user,
  #developerHubModal .user-analytics-user-head,
  #developerHubModal .user-analytics-identity,
  #developerHubModal .user-analytics-toolbar{min-width:0;max-width:100%}
  #developerHubModal .user-analytics-identity>div{min-width:0;overflow-wrap:anywhere}

  /* Keep forms/tables from forcing a modal sideways. */
  .modal-card table,
  .modal-card .profile-table,
  .modal-card .form-grid,
  .modal-card .detail-grid,
  .modal-card .developer-summary-grid{min-width:0;max-width:100%}
}

@media (min-width:901px) and (max-width:1180px){
  #profileModal .profile-modal,
  #developerHubModal .developer-hub-modal,
  #messageCenterModal .message-center-modal,
  #dashboardModal .dashboard-modal{width:96vw!important}
  #profileModal .profile-mobile-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #developerHubModal .developer-toolbar{grid-template-columns:minmax(220px,1fr) repeat(2,minmax(150px,auto))}
  #developerHubModal .user-analytics-summary,
  #developerHubModal .user-analytics-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}