/* Account, organizations, sign-in again and consent pages; the engagement context map.
   Builds on portal.css. */
.login-options { display: grid; gap: 12px; margin: 24px 0; }
.login-options button { width: 100%; min-height: 46px; text-align: center; }
.dev-accounts { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.dev-accounts h2 { font-size: 15px; }
.dev-accounts form { display: inline-block; margin: 8px 8px 0 0; }

/* Profile facts, and "Details for support". */
.account-ids { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 14px 0 22px; font-size: 14px; }
.account-ids dt { color: var(--muted); font-weight: 600; }
.account-ids dd { margin: 0; overflow-wrap: anywhere; }
.support-details { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); }
.support-details summary { font-weight: 600; color: var(--ink-2); }
.support-details .account-ids { margin: 12px 0 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.restricted-help { margin: 0 0 20px; padding-left: 20px; max-width: 680px; }
.restricted-help li { margin: 6px 0; }
.inline-signout { display: inline-block; margin-left: 12px; vertical-align: middle; }

.account-page .account-section h2 { margin-bottom: 12px; }
.account-page .account-section > p:last-child, .account-page .account-section > .muted:last-child { margin-bottom: 0; }
.account-page .inline-form { margin-top: 4px; }
.account-page .inline-form + .muted { margin-top: 10px; }
.account-everywhere { margin-top: 4px; }
.consent-create form { max-width: 520px; }
.consent-create summary { font-size: 14px; }
.join-offer { margin-top: 16px; }
.join-requests { margin-top: 14px; }

/* The context map: conversations and their messages, as a tree. */
.context-tree, .context-tree ul { list-style: none; padding-left: 0; margin: 0; }
.context-tree { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 18px; }
.context-tree > li { padding: 12px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-weight: 650; }
.context-tree > li:first-child { border-top: 0; }
.context-tree ul { margin: 8px 0 0 7px; border-left: 2px solid var(--line); }
.context-tree ul li { padding: 6px 0 6px 16px; font-weight: 400; font-size: 14px; color: var(--muted); }
.context-tree time { margin-left: 10px; }

@media (max-width: 600px) {
  .account-page .list-row { flex-wrap: wrap; gap: 12px; }
  .account-ids { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .account-ids dd { margin-bottom: 8px; }
  .inline-signout { display: block; margin: 12px 0 0; }
}