/* account screens — design/canvas/Console-Account.dc.html and design/STYLE.md. Shared components are in /app.css. */

.acc-card { max-width: 880px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.acc-card h2 { margin: 0; }
.acc-p { margin: 0; overflow-wrap: anywhere; }
.acc-note { max-width: 720px; }
.acc-strong { color: var(--text); font-weight: 600; }
.acc-loading { margin: 0; }
.acc-card .badge.ok, .acc-dev .badge.ok { color: var(--ok-text); }

/* profile */
.acc-id { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; min-width: 0; }
.acc-avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line-3);
  display: flex; align-items: center; justify-content: center; font: 600 22px var(--display); color: var(--accent-text);
}
.acc-id-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.acc-email { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.acc-facts {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.acc-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-facts dt { font-size: 13px; color: var(--muted); }
.acc-facts dd { margin: 0; overflow-wrap: anywhere; }

/* sign-in methods */
#acc-methods { display: flex; flex-direction: column; gap: 16px; }
.acc-banner { border-radius: 10px; padding: 12px 14px; }
.acc-banner > svg { color: var(--warn); }
.acc-banner .msg { color: var(--text); }
.acc-methods { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.acc-method { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 64px; padding: 10px 0; }
.acc-method + .acc-method { border-top: 1px solid var(--line); }
.acc-mi {
  flex: none; width: 36px; height: 36px; border-radius: var(--r); background: var(--raised);
  display: flex; align-items: center; justify-content: center; color: var(--text-2);
}
.acc-mt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.acc-mn { font-weight: 600; }
.acc-method .badge.off { color: var(--body); }
button.acc-toggle.on { background: var(--raised); }

.acc-pw {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.acc-pw[hidden] { display: none; }
.acc-pw h3 { margin: 0; font-size: 16px; }
.acc-pw input[aria-invalid="true"], .acc-em input[aria-invalid="true"] { border-color: var(--bad); }
.acc-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok-text); }

/* email */
.acc-em { gap: 12px 16px; }
.acc-em > label { flex: 1 1 280px; min-width: 0; }
.acc-em > button { white-space: nowrap; }
.acc-em-err { margin: 8px 0 0; }
.acc-sent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 12px 14px; overflow-wrap: anywhere;
}
.acc-sent > svg { flex: none; margin-top: 1px; color: var(--info); }

/* sessions */
.card.acc-sessions { padding: 20px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.acc-sessions-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 0 24px; }
.acc-sessions-head h2 { margin: 0; }
.acc-sessions .table-wrap { position: relative; } /* keeps the sr-only header inside the scroll box */
.acc-table { min-width: 820px; }
.acc-table tbody tr:last-child td { border-bottom: 0; }
.acc-sessions-note { margin: 0; padding: 14px 24px 12px; }
.acc-table th:first-child, .acc-table td:first-child { padding-left: 24px; }
.acc-table th:last-child, .acc-table td:last-child { padding-right: 24px; }
.acc-table td { height: 56px; padding-top: 8px; padding-bottom: 8px; }
.acc-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.acc-ip { color: var(--text-2); }
.acc-dim { color: var(--body); }
.acc-soon { color: var(--warn); }
.acc-nowrap { white-space: nowrap; }
.acc-act { text-align: right; }

@media (max-width: 860px) {
  .acc-card { padding: 20px 16px; }
  .acc-sessions-head { padding: 0 16px; }
  .acc-table th:first-child, .acc-table td:first-child { padding-left: 16px; }
  .acc-table th:last-child, .acc-table td:last-child { padding-right: 16px; }
  .acc-sessions-note { padding: 14px 16px 12px; }
  .acc-method button, .acc-pw button, .acc-em button, .acc-card .row button { min-height: 44px; }
  .acc-act button { min-height: 44px; }
  .acc-em > button { flex: 1 1 100%; }
}

/* Appearance: System / Light / Dark (uses the .ag-seg look from agent.css) */
.acc-theme button[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: 600; }
.acc-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; cursor: pointer; }
.acc-check input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--accent, currentColor); }