/* Connections — matches "06 Connections" in the Musketr Mockups Claude
   Design file. Builds on the existing .connection-row/.accounts-list/
   .connection-state rules already in application.css; this file turns the
   shared-border list into individually bordered cards and adds the
   expiring/expired and "add a platform" variants. */

.accounts-list { border-top: 0; display: flex; flex-direction: column; gap: 12px; background: none; }
.connection-row { border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.connection-row--warn { border: 1.5px solid #d9a441; background: #fffaf0; }
.connection-row__warn-text { color: #906221 !important; }

.connection-row__disconnect { border: 0; background: none; padding: 0; cursor: pointer; font: 700 0.82rem var(--font-ui); color: var(--faint); }
.connection-row__disconnect:hover { color: var(--red); }

.connection-row--add { border-style: dashed; }
.connection-row__add-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--wash); color: var(--faint); display: grid; place-items: center; font-size: 16px; }
.connection-row__empty { color: var(--soft); }

[aria-disabled="true"] { cursor: default; opacity: 0.85; }

@media (max-width: 780px) {
  .connection-row { grid-template-columns: 32px 1fr; }
  .connection-state, .connection-row .button, .connection-row__disconnect { grid-column: 2; justify-self: start; }
}