/* Account surfaces (Architecture/unified-identity-design.md). PUDL draws
   every control; these rules only place the account's pages, dialogs and
   applet, and every rule is scoped to them, because this sheet loads with
   the Account applet on any page of the site. */

/* A page of the account in the classic view: one readable column. */
.account-page { max-width: 40rem; margin: 0 auto; padding: var(--space-5) 0; }
.account-page > h1 { margin: 0 0 var(--space-4); }
/* The beta's article workspace and its reader take a wider column. */
.account-page-wide { max-width: 56rem; }
.account-page form.stack { display: grid; gap: var(--space-3); margin-block: var(--space-4); }
.account-page form.stack > .btn { justify-self: start; }
.account-page article { overflow-wrap: anywhere; }
.account-page article pre { overflow: auto; }
/* The emailed links' pages (Link, Delete): a row of actions. */
.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* The Account applet's page is as wide as its panel of cards. */
.account-page:has(.settings-panel) { max-width: 720px; }
.account-page .settings-panel { padding-inline: 0; }

/* The applet's body, on its page and in its window: PUDL's settings panel
   of cards (Pages/Shared/_AccountContent.cshtml). These rules only place
   what is inside the cards. */
.account p { overflow-wrap: anywhere; }
.account .kv-table { margin-bottom: var(--space-2); }
.account-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.account-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--border); }
.account-list li:last-child { border-bottom: 1px solid var(--border); }
.account-list form { display: block; margin: 0; }
@media (max-width: 540px) { .account-list li { flex-direction: column; align-items: flex-start; } }
/* The picture's form sits in the actions row beside Remove picture. */
.account-picture-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* With script, Choose a picture… stands for the file field and Save
   picture; without it, they stand for themselves. js/account.js marks the
   mount data-account-js. */
.account-js-only { display: none; }
[data-account-js] .account-js-only:not(.visually-hidden) { display: inline-flex; }
[data-account-js] .account-no-js { display: none; }

/* In a window the panel is the window's width, which is the panel's own. */
.win-body [data-applet="account"] { width: min(720px, 100%); box-sizing: border-box; }
.win-body [data-applet="account"] .settings-panel { margin: 0; }

/* A reader's picture, round. In the top bar it is the account's item in
   the status area (css/pudl-site.css). */
.account-avatar { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.account-avatar-placeholder { color: var(--text); }
.account-picture { display: flex; align-items: center; gap: var(--space-4); }
.account-picture .card-desc { margin: 0; }
.account-avatar-large { width: 72px; height: 72px; flex: none; }

/* Sign in and Create account: PUDL's dialog, with room for a form. */
.account-dialog { width: min(30rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow: auto; }
.account-panel { display: grid; gap: var(--space-3); }
.account-panel p { margin: 0; line-height: 1.55; }
.account-panel form { display: grid; gap: var(--space-3); margin: 0; }
.account-panel .dialog-actions { margin-top: var(--space-2); }
.account-alt { display: grid; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-3); }
/* Sign in's first part, for a newcomer: Create an account, before the form
   for those who already have one. */
.account-new { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.account-new p { flex: 1 1 14rem; }

/* Super-user setup: numbered steps, each marked done or to do by a glyph
   and a word, never by colour alone. */
.account-steps { display: grid; gap: var(--space-5); margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.account-steps > li { display: grid; gap: var(--space-2); }
.account-steps p, .account-steps ul { margin: 0; line-height: 1.55; }
.account-step-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); }
.account-step-mark { color: var(--text-muted); }
.account-steps > li[data-done="true"] .account-step-mark { color: var(--positive); }
.account-step-state { order: 9; margin-left: auto; font-size: var(--text-sm); font-weight: normal; color: var(--text-muted); }