/* Account and quote surfaces share the studio's paper, ink and type. */
[data-accounts="true"] #operator-auth, [data-accounts="true"] #operator-lock,
[data-accounts="true"] #operator-unlock, [data-accounts="true"] #sign-in-dialog,
[data-accounts="true"] .author-options { display: none !important; }
.account-dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); padding: 30px; width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; box-shadow: var(--sheet-shadow); font: 14px/1.55 var(--sans); }
.account-dialog::backdrop { background: rgb(23 26 25 / .28); }
.account-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.account-dialog h2 { font: 500 30px/1.2 var(--serif); margin: 0; letter-spacing: -.025em; }
.account-dialog h3 { font: 500 22px/1.3 var(--serif); margin: 0 0 16px; }
.account-dialog p { margin: 0 0 14px; }
.account-dialog button, .account-dialog input { font: inherit; }
.account-close { background: none; border: 0; color: var(--ink-3); min-width: 44px; min-height: 44px; cursor: pointer; font-size: 24px !important; }
.account-note { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.account-muted { color: var(--ink-3); }
.account-status { margin-bottom: 24px; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--line); }
.account-status strong { display: block; font-weight: 500; margin-bottom: 4px; }
.account-error { color: var(--oxide); overflow-wrap: anywhere; }
.account-error:empty { display: none; }
.account-primary { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); padding: 10px 18px; min-height: 40px; border-radius: 8px; cursor: pointer; text-align: center; font-size: 14px; font-weight: 500; }
.account-primary:hover:not(:disabled) { opacity: .92; }
.account-primary.wide { width: 100%; }
.account-secondary { color: var(--ink); background: transparent; border: 1px solid var(--line-2); padding: 10px 18px; min-height: 40px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.account-secondary:hover:not(:disabled) { border-color: var(--ink); }
.account-link { background: transparent; color: var(--ink-2); border: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-link:hover { color: var(--ink); }
.account-dialog button:disabled { opacity: .45; cursor: wait; }
.account-dialog input:not([type="radio"]) { display: block; width: 100%; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper-2); color: var(--ink); box-sizing: border-box; margin: 6px 0 16px; }
.account-dialog label { display: block; font-size: 12px; color: var(--ink-2); }
.account-divider { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 12px; margin: 20px 0; }
.account-divider::before,.account-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.account-section { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 24px; }
.account-balance { font: 500 48px/1.1 var(--serif); letter-spacing: -.035em; margin: 8px 0 !important; font-variant-numeric: tabular-nums; }
.account-balance span { font: 14px/1.4 var(--sans); letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.account-eyebrow { font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; color: var(--ink-2); }
.account-identity { overflow-wrap: anywhere; }
.account-packs { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 12px; }
.account-packs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.account-pack { display: flex !important; gap: 10px; align-items: center; min-height: 44px; border: 1px solid var(--line); padding: 0 12px; cursor: pointer; border-radius: 8px; }
.account-pack:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: transparent; }
.account-pack input { accent-color: var(--ink); margin: 0; }
.account-pack strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.account-pack .pack-price { margin-left: auto; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.account-activity { list-style: none; padding: 0; margin: 0; }
.account-activity li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding: 9px 0; }
.account-activity li:first-child { border-top: 0; padding-top: 0; }
.account-activity span { font-size: 14px; color: var(--ink); }
.account-activity small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.account-activity b { font: 500 13px/1.5 var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 24px; }
.account-actions .account-primary { min-width: 150px; }
.account-qr { display: block; width: 160px; max-width: 100%; margin: 16px auto; background: white; padding: 10px; }
.account-code { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; user-select: all; }
.account-banner { max-width: 710px; margin: 0 auto 24px; font: 13px/1.6 var(--sans); color: var(--ink-2); padding: 12px 16px; border: 1px solid var(--line); background: var(--paper-2); }
.account-banner button { float: right; font: inherit; }
.credit-outcome { font: 12px/1.6 var(--sans); color: var(--ink-3); margin-top: 8px; }
.credit-outcome p { margin: 4px 0; }
.account-video-actions { display:flex; gap:20px; }
.account-version { display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding:14px 0; }
.account-version p { margin:0; }
.account-version strong { font-weight:500; }
.account-version small { display:block; color:var(--ink-3); }
.account-dialog :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media(max-width:600px) { .account-dialog { padding: 22px; } .account-balance { font-size: 44px; } #account-button { font-size: 12px; } .account-actions { gap: 10px; } }

/* ── The account sheet ────────────────────────────────────────────────────
   A panel that settles into place under the Account button rather than a box
   that pops up: one column, rules instead of cards, and only two things
   heavier than the body — the address and the credit figure. */
.account-dialog.wallet-dialog {
  width: min(400px, 100vw - 32px); height: fit-content; max-height: calc(100dvh - 24px);
  margin: 12px 16px auto auto; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); font: 14px/1.55 var(--sans);
  box-shadow: 0 24px 64px rgb(23 26 25 / .14), 0 1px 3px rgb(23 26 25 / .06);
  overscroll-behavior: contain; transform-origin: top right;
}
/* An ink shadow disappears on a dark page, so there the panel keeps its edge
   with a hairline instead. */
html[data-theme="dark"] .account-dialog.wallet-dialog { box-shadow: 0 24px 64px rgb(0 0 0 / .5), 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .account-dialog.wallet-dialog { box-shadow: 0 24px 64px rgb(0 0 0 / .5), 0 0 0 1px var(--line); }
}
.wallet-dialog > header { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.wallet-dialog h2 { font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; }
.wallet-dialog h3 { font: 500 13px/1.5 var(--sans); letter-spacing: 0; color: var(--ink-2); margin: 0 0 10px; }
.wallet-dialog .account-close { display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; color: var(--ink-3); font-size: 20px !important; line-height: 1; }
.wallet-dialog .account-close:hover { color: var(--ink); }
#account-content { padding: 4px 24px 24px; }
#account-content > section, #account-content > footer { border-top: 1px solid var(--line); padding: 20px 0; }
#account-content > section:first-child { border-top: 0; }
.wallet-dialog p { margin: 0 0 10px; }
.wallet-dialog .account-note { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 6px 0 0; }
.wallet-dialog .account-email-address { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.account-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.account-credits-line { margin: 0; color: var(--ink-2); }
/* One figure: the balance is the sheet's headline, so it takes the text face
   with lining figures. The mono comma opens a gap that reads as two numbers. */
.account-figure { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.account-figure-value { font: 500 28px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.account-figure-unit { font-size: 13px; color: var(--ink-3); }
.account-free-line { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 14px; color: var(--ink); }
.account-credits .account-secondary, .account-identity .account-secondary { margin-top: 12px; }
.wallet-dialog .account-status { margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.wallet-dialog .account-section { border-top: 1px solid var(--line); margin: 0; padding: 20px 0; }
.wallet-dialog .account-primary, .wallet-dialog .account-secondary { min-height: 40px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: border-color .15s, opacity .15s; }
.wallet-dialog .wide { width: 100%; }
.wallet-dialog .account-purchase-note { margin: 10px 0 0; }
.wallet-dialog .account-footer { display: block; margin: 0; padding: 20px 0 0; }
.wallet-dialog .account-footer .account-actions { justify-content: flex-start; gap: 10px; margin-top: 10px; }
.wallet-dialog .account-footer .account-actions .account-primary { min-width: 0; }
.wallet-dialog .account-code { padding: 10px 12px; background: var(--paper-2); border-radius: 6px; }
.wallet-dialog .account-error { margin: 10px 0; font-size: 13px; }
/* Opening settles the panel into place under the button; closing takes it
   back the same way, a little faster. */
@media (prefers-reduced-motion: no-preference) {
  .account-dialog[open] { animation: account-rise 280ms cubic-bezier(.2, 0, 0, 1) both; }
  .account-dialog[open]::backdrop { animation: account-veil 280ms ease-out both; }
  .account-dialog.is-closing { animation: account-settle 160ms cubic-bezier(.4, 0, 1, 1) both; }
  .account-dialog.is-closing::backdrop { animation: account-veil 160ms ease-in reverse both; }
  #quote-dialog[open], #account-action[open] { animation-name: account-rise-center; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .account-dialog.wallet-dialog[open] { animation-name: account-rise-sheet; }
}
@keyframes account-rise { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes account-rise-center { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes account-rise-sheet { from { opacity: 0; transform: translateY(24px); } }
@keyframes account-settle { to { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes account-veil { from { opacity: 0; } to { opacity: 1; } }
/* On a phone the same panel is a bottom sheet: full width, and it rises from
   the edge it is anchored to. */
@media (max-width: 640px) {
  .account-dialog.wallet-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 14px 14px 0 0; max-height: calc(100dvh - 24px); transform-origin: bottom center; }
  .wallet-dialog > header { padding: max(14px, env(safe-area-inset-top)) 14px 14px 20px; }
  #account-content { padding: 4px 20px max(24px, env(safe-area-inset-bottom)); }
}

#quote-dialog, #account-action { transform-origin: center; }
#quote-dialog { padding: 24px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
#quote-dialog header { margin-bottom: 20px; }
#quote-dialog h2 { font: 600 22px/1.3 var(--sans); letter-spacing: -.025em; }
#quote-dialog .account-close { display: grid; place-items: center; padding: 0; border-radius: 7px; }
#quote-dialog .account-balance { font: 500 34px/1.2 var(--sans); margin: 10px 0 16px !important; }
#quote-dialog .account-eyebrow { font-size: 12px; }
#quote-dialog .account-note { color: var(--ink-2); line-height: 1.6; }
#quote-dialog .account-actions { margin-top: 20px; }
#quote-dialog .account-primary, #quote-dialog .account-secondary { border-radius: 7px; font-size: 12px; }
.wallet-dialog form + .account-error + .account-note { margin-top: 12px; }

/* ── Sign-in and authenticator ────────────────────────────────────────────
   These two surfaces carry the only unfamiliar steps in the product, so they
   get the reading face for explanation and the data face for anything the
   viewer must copy or type. Everything else stays on the UI sans. */
.account-lede {
  font: 400 15px/1.5 var(--reading);
  color: var(--ink-2);
  letter-spacing: .002em;
  text-wrap: pretty;
}
.wallet-dialog .account-lede { margin: 0 0 18px; }

/* A real sequence, so it is numbered: scan, then type, then continue. The
   counter sits in the margin and stays out of the text column. */
.account-steps { list-style: none; counter-reset: step; margin: 0 0 4px; padding: 0; }
.account-step { counter-increment: step; position: relative; padding: 0 0 18px 34px; }
.account-step::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--paper-2); color: var(--ink-2);
  font: 500 11px/1 var(--data); font-variant-numeric: tabular-nums;
}
/* The rail joins the steps without running past the last marker. */
.account-step:not(:last-child)::after {
  content: ""; position: absolute; left: 11px; top: 26px; bottom: 4px;
  border-left: 1px solid var(--line);
}
.account-step > :last-child { margin-bottom: 0; }
.wallet-dialog .account-step h4 {
  font: 600 13px/1.5 var(--sans); letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 5px;
}

/* The QR sits on white whatever the page theme is: scanners need the real
   contrast, so this frame is deliberately not themed. */
.account-qr-frame {
  display: grid; place-items: center;
  padding: 14px; margin: 0 0 12px;
  background: #fff;
  border: 1px solid var(--line-2); border-radius: 10px;
}
.account-qr, .wallet-dialog .account-qr {
  display: block; width: 148px; height: 148px; max-width: 100%;
  margin: 0; padding: 0; background: #fff;
}

/* The shared secret is transcribed by hand when a camera is unavailable, so
   it is set in the data face, spaced, and selectable in one gesture. */
.account-secret { display: flex; align-items: center; gap: 10px; }
.account-code, .wallet-dialog .account-code {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px;
  font: 500 12px/1.5 var(--data); letter-spacing: .06em;
  color: var(--ink); overflow-wrap: anywhere; user-select: all;
}
.account-copy {
  flex: 0 0 auto; min-height: 36px; padding: 8px 12px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 6px;
  font: 500 11px/1 var(--sans); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.account-copy:hover { color: var(--ink); border-color: var(--ink-3); }

/* Six digits, read back as digits: tabular, tracked, and wide enough that a
   transposed character is obvious before it is submitted. */
.wallet-dialog .account-code-input {
  width: 100%; margin: 0 0 14px; padding: 13px 12px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--paper-2); color: var(--ink);
  font: 500 21px/1.2 var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .34em; text-indent: .34em; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.wallet-dialog .account-code-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--selection);
}
.wallet-dialog .account-code-input::placeholder { color: var(--ink-4); letter-spacing: .34em; }

/* A failure is an event in the panel, not a stray red line: the rule gives it
   an edge so it reads as a block the eye can skip once it is resolved. */
.wallet-dialog .account-error:not(:empty) {
  margin: 12px 0; padding: 9px 0 9px 12px;
  border-left: 2px solid var(--oxide);
  font-size: 12px; line-height: 1.55;
}
.wallet-dialog .account-mfa-status {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-2); font-size: 12px; padding: 4px 0 10px;
}
.account-spinner {
  display: inline-block;
  flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--line-2); border-top-color: var(--ink-3);
  animation: account-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .account-spinner { animation: none; }
}
@keyframes account-spin { to { transform: rotate(1turn); } }
.wallet-dialog .account-step-actions { display: grid; gap: 8px; margin-top: 4px; }

/* A 32-character base32 secret does not fit beside the copy button on a phone,
   and a key broken mid-run is easy to mistranscribe. Give it the whole row. */
@media (max-width: 600px) {
  .account-secret { flex-wrap: wrap; }
  .account-code, .wallet-dialog .account-code { flex: 1 1 100%; letter-spacing: .04em; }
  .account-copy { margin-left: auto; }
}

/* Reserve the account control before the deferred bootstrap resolves. */
html[data-accounts="true"] #account-button[hidden] { display: inline-flex !important; }
#account-button { visibility: hidden; min-width: 10em; justify-content: center; gap: 8px; }
.account-button-balance { color: var(--ink-3); font: inherit; }
.account-banner .account-link { margin-left: 16px; }
#account-google { display: flex; align-items: center; justify-content: center; gap: 12px; }
#invitation-code { font-family: var(--data); letter-spacing: .06em; }
.account-dialog .account-eyebrow { text-transform: none; }
#account-logout-confirm:empty { display: none; }

.account-primary .account-spinner, .account-secondary .account-spinner { margin-right: 8px; vertical-align: middle; }