/* The account pages' own rules, on the site's tokens. scrollcraft.css, styles.css and page.css load first, for the
   reset, the fonts, the tokens on :root, the page bar and the footer. Nothing glows: a surface is a crisp line.
   Gold is the site's "needs you" colour and is used only for "Your payment didn't go through". */

/* Staging only: a quiet bar above the page bar. */
.stage-bar {
  padding: 8px max(var(--g), calc((100% - 1420px) / 2 + var(--g)));
  background: var(--sc-surface); border-bottom: 1px solid var(--card-edge); color: var(--sc-ink-soft);
  font: 400 13px/1.45 var(--sc-font-text); text-align: center; text-wrap: balance;
}

/* ============================================================ the sign-in pages === */
/* A button or a link drawn as the site's plan button (.plan-cta, from styles.css). The document's own link colour and
   underline (.doc a) would win over it, so the account's buttons say theirs again. */
.acct .plan-cta { margin-top: 0; width: 100%; cursor: pointer; }
.acct button.plan-cta { background-color: transparent; }
.acct button.plan-cta:hover { background-color: rgb(var(--line) / 0.7); }
.acct a.plan-cta, .acct a.plan-cta:hover { color: var(--sc-ink); text-decoration: none; }
.acct .plan-cta.is-primary, .acct button.plan-cta.is-primary { background-color: rgb(var(--accent)); border-color: rgb(var(--accent)); color: var(--sc-accent-ink); }
.acct .plan-cta.is-primary:hover, .acct button.plan-cta.is-primary:hover { background-color: rgb(var(--accent-strong)); border-color: rgb(var(--accent-strong)); }
.acct a.plan-cta.is-primary, .acct a.plan-cta.is-primary:hover { color: var(--sc-accent-ink); }
.acct .acct-button { max-width: 360px; }

.acct-signin { display: grid; gap: 12px; max-width: 360px; }
.acct .acct-or { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--sc-ink-soft); font-size: 14px; }
.acct .acct-or::before, .acct .acct-or::after { content: ''; flex: 1; border-top: 1px solid rgb(var(--line)); }

.acct-form { display: grid; gap: 8px; max-width: 360px; }
.acct-form label { color: var(--sc-ink-soft); font-size: 14px; }
.acct-form input[type='email'], .acct-form input[type='text'] {
  min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(var(--line-strong));
  background: rgb(var(--ground)); color: var(--sc-ink); font: 400 16px/1.25 var(--sc-font-text);
}
.acct-form input:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.acct-form .plan-cta { margin-top: 4px; }

/* Why a link was not sent: a card with one crisp line, and red for what failed. */
.acct .acct-alert {
  margin: 0 0 18px; padding: 12px 16px; max-width: 360px; border-radius: 12px; background: var(--sc-surface);
  box-shadow: inset 3px 0 0 rgb(var(--danger)), 0 0 0 1px var(--card-edge); color: var(--sc-ink); font-size: 15px; line-height: 1.5;
}
.acct .acct-terms { margin: 22px 0 0; max-width: 360px; color: var(--sc-ink-soft); font-size: 13.5px; line-height: 1.55; }

/* ============================================================ the start and welcome pages === */
.acct [hidden] { display: none; }

/* The period switch is the site's .billing pill, drawn from two links. */
.acct .billing { margin-bottom: 22px; }
.acct .billing a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  color: var(--sc-ink-soft); font: 500 13.5px/1.2 var(--sc-font-text); text-decoration: none; white-space: nowrap;
}
.acct .billing a:hover { color: var(--sc-ink); text-decoration: none; }
.acct .billing a[aria-current='page'] { background: rgb(var(--line) / 0.7); color: var(--sc-ink); }

.acct .acct-price { margin: 0 0 16px; color: var(--sc-ink); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.acct .acct-lines { margin: 0 0 16px; padding: 0; list-style: none; }
.acct .acct-lines li { margin: 0 0 8px; padding: 0; }
.acct .acct-note { color: var(--sc-ink-soft); }
.acct .acct-fine { margin: 18px 0 0; max-width: 360px; color: var(--sc-ink-soft); font-size: 13.5px; line-height: 1.55; }
.acct .acct-after { margin: 16px 0 0; }
/* "Not you? Sign out": a post that reads as a word in the sentence. */
.acct .acct-linkform { display: inline; margin: 0; }
.acct .acct-link { padding: 0; border: 0; background: none; color: var(--sc-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.acct .acct-link:hover { text-decoration-thickness: 2px; }

/* ============================================================ the account page === */
.acct .acct-who { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.acct .acct-who p { margin: 0; }
.acct .acct-avatar {
  display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: var(--sc-surface); box-shadow: 0 0 0 1px var(--card-edge);
  color: var(--sc-ink); font: 500 30px/1 var(--sc-font-display); text-transform: uppercase;
}
.acct .acct-name { color: var(--sc-ink); font-size: 20px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.acct .acct-email, .acct .acct-method, .acct .acct-small, .acct .acct-hint { color: var(--sc-ink-soft); font-size: 14px; line-height: 1.5; }
.acct .acct-profile .acct-form { margin-bottom: 22px; }
.acct .acct-form input[type='text'], .acct .acct-form input[type='email'] { width: 100%; box-sizing: border-box; }

/* Change picture is a label drawn as the plan button, over a file input that is hidden but still takes the keyboard. */
.acct .acct-picture { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.acct .acct-picture > .acct-hint, .acct .acct-picture > .acct-alert { flex: 1 0 100%; margin: 0; }
.acct .acct-picture .plan-cta { width: auto; padding: 0 18px; }
.acct .acct-file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.acct .acct-file-input:focus-visible + label { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

/* The plan: a card with one crisp line, and its buttons beneath. */
/* Where arm.js says what a button asks, for a screen reader: there, and not drawn. */
.acct .acct-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acct .acct-status { margin: 0 0 14px; color: var(--sc-ink); font-size: 15px; line-height: 1.5; }
.acct .acct-plan { margin: 0 0 18px; padding: 18px 22px; border-radius: 16px; background: var(--sc-surface); box-shadow: 0 0 0 1px var(--card-edge); }
.acct .acct-plan p { margin: 0 0 6px; }
.acct .acct-plan-title { margin: 0 0 8px; color: var(--sc-ink); font-size: 20px; font-weight: 600; line-height: 1.3; }
.acct .acct-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 14px; }
.acct .acct-act { display: grid; justify-items: start; gap: 6px; }
.acct .acct-act-form { margin: 0; }
.acct .acct-act .plan-cta, .acct .acct-foot .plan-cta, .acct .acct-computers .plan-cta { width: auto; padding: 0 18px; }
.acct .acct-act .acct-act-note { margin: 0; color: var(--sc-ink-soft); font-size: 13.5px; line-height: 1.45; }

/* A payment that failed needs the person: gold, the site's "needs you" colour, as a line and a coloured title. No glow. */
.acct .acct-plan.acct-needs { box-shadow: none; border: 1px solid rgb(var(--warn) / 0.55); border-left-width: 3px; }
.acct .acct-needs .acct-plan-title { color: rgb(var(--warn)); }

.acct .acct-computers { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.acct .acct-computers li { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--sc-surface); box-shadow: 0 0 0 1px var(--card-edge); }
.acct .acct-computers p { margin: 0; }
.acct .acct-computer-name { color: var(--sc-ink); font-weight: 600; overflow-wrap: anywhere; }

.acct .acct-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgb(var(--line)); }