/* Spec 43 D7: a provider's accounts (static/runtime/connections-accounts.js).

   On the card they are quiet text under the purpose, one line per account, so
   a card with no accounts looks as it did. In the dialogs each account is a
   row with its badges and a Manage button. Long addresses ellipsize rather
   than widen the card or the phone sheet. */
.card-accounts {
  display:grid;
  gap:6px;
  min-width:0;
  padding-top:8px;
  border-top:1px solid var(--ui-line, var(--line));
}
.connection-account-line {
  display:grid;
  gap:2px;
  min-width:0;
}
/* Wraps: "<name>'s account (personal)" must be read whole. */
.connection-account-name {
  color:var(--txt);
  font-size:12px;
  font-weight:600;
  overflow-wrap:anywhere;
}
.connection-account-identity {
  color:var(--txt-soft);
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.connection-account-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  min-width:0;
}
.connection-account-owner {
  color:var(--dim);
  font-size:10.5px;
  margin-right:2px;
}
.connection-account-meta .catalog-chip,
.connection-account-badges .catalog-chip {
  font-size:9.5px;
  padding:1px 7px;
  white-space:nowrap;
}
.account-kind-badge.account-kind-shared { color:var(--blue); border-color:currentColor; }
.account-kind-badge.account-kind-service { color:var(--amber); border-color:currentColor; }
.account-default-badge {
  color:var(--ui-accent, var(--blue));
  border-color:color-mix(in srgb, var(--ui-accent, var(--blue)) 45%, transparent);
  background:var(--ui-accent-soft, transparent);
}
.card-accounts-more {
  color:var(--dim);
  font-size:10.5px;
}

/* In the card's dialog and the package's manage modal. */
.connection-accounts {
  display:grid;
  gap:8px;
  min-width:0;
  margin:12px 0 0;
}
.connection-accounts-head {
  color:var(--txt);
  font-size:12px;
}
.connection-account-list {
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.connection-account {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--ui-line, var(--line));
  border-radius:9px;
  background:var(--panel-bg);
}
.connection-account .connection-account-line { flex:1 1 auto; }
.connection-account > .button { flex:0 0 auto; }
.connection-accounts > [data-account-add] { justify-self:start; }

/* One account's own dialog. */
/* .manage-block is display:block in the shell's sheet; this one is a grid. */
.manage-blocks .connection-account-facts {
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  gap:4px 12px;
  margin:0;
  font-size:12px;
}
.connection-account-facts dt { color:var(--dim); }
.connection-account-facts dd {
  margin:0;
  color:var(--txt);
  overflow-wrap:anywhere;
}
.connection-account-badges {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.connection-account-note {
  color:var(--dim);
  font-size:11px;
  line-height:1.4;
}
.wise-profile-find { min-height:44px; }