/* Account pages (views/account.js). Builds on site.css; mobile-first. */
.acct { padding-block: 24px 48px; }
.acct h2 { font-size: 1.2rem; }
.acct-narrow { max-width: 34rem; }
.acct a:focus-visible, .acct summary:focus-visible, .acct button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Job list: tappable cards instead of a table so it fits a 360px screen. */
.acct-jobs, .acct-prefs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.acct-job {
  display: grid; gap: 4px; padding: 14px 16px; min-height: 44px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none;
}
.acct-job:hover { border-color: var(--ink); }
.acct-job .status { justify-self: start; }

.acct-pref { --stack: .5rem; }
.acct-note { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.02rem; }
.acct-pref summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.acct select { width: 100%; }
.acct-devlink { overflow-wrap: anywhere; }
.acct-danger { background: var(--bad); border-color: var(--bad); color: #fff; }

@media (min-width: 720px) {
  .acct-job { grid-template-columns: 1fr auto; align-items: center; }
  .acct-job > .small { grid-column: 1 / -1; }
}