/* Final connections sizing. Loaded last so DEX scroll height is stable. */
@media (min-width: 1181px) {
  .app-page[data-page="connections"] .route-summary-grid {
    align-self: center !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: 1px !important;
    min-height: 0 !important;
    height: auto !important;
    border: 1px solid rgba(137, 159, 181, 0.14) !important;
    background: rgba(137, 159, 181, 0.12) !important;
    overflow: hidden !important;
  }

  .app-page[data-page="connections"] .route-summary-grid article {
    position: relative;
    display: grid !important;
    align-content: start !important;
    height: 100% !important;
    min-height: 178px !important;
    padding: 26px 26px 24px !important;
    border: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent),
      rgba(7, 15, 23, 0.82) !important;
  }

  .app-page[data-page="connections"] .route-summary-grid article::before {
    display: inline-grid;
    width: 38px;
    height: 28px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(137, 159, 181, 0.16);
    color: #9fb0c0;
    background: rgba(118, 137, 158, 0.055);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
  }

  .app-page[data-page="connections"] .route-summary-grid article:nth-child(1)::before {
    content: "01";
  }

  .app-page[data-page="connections"] .route-summary-grid article:nth-child(2)::before {
    content: "02";
  }

  .app-page[data-page="connections"] .route-summary-grid article:nth-child(3)::before {
    content: "03";
  }

  .app-page[data-page="connections"] .route-summary-grid strong {
    margin: 0 !important;
    color: #edf4fa !important;
    font-size: clamp(18px, 1.15vw, 24px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
  }

  .app-page[data-page="connections"] .route-summary-grid span {
    max-width: 34ch;
    margin-top: 16px !important;
    color: #94a3b2 !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  .app-page[data-page="connections"] .connection-grid {
    align-items: start !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .app-page[data-page="connections"] .connector-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .app-page[data-page="connections"] .connector-list {
    max-height: 510px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-right: 8px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(137, 159, 181, 0.36) transparent;
  }

  .app-page[data-page="connections"] .connector-list::-webkit-scrollbar {
    width: 5px;
  }

  .app-page[data-page="connections"] .connector-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .app-page[data-page="connections"] .connector-list::-webkit-scrollbar-thumb {
    background: rgba(137, 159, 181, 0.36);
  }

  .app-page[data-page="connections"] .connector-card {
    min-height: 84px !important;
  }
}