/* 12.06.26 01:51 AM / 01:51 — edited by Claude — i3 item #6: CREATE scoped stylesheet for
   the account surface (login.html + account.html). Kept OUT of pages.css on purpose (the
   orchestrator's "don't bloat pages.css" instruction). Same rules as pages.css: NO design
   tokens defined here, every value references tokens.css custom properties; shared
   components (.card/.btn/.pill/.code-block) are COMPOSED, never overridden. */

/* ============================================================================
   account.css — sign-in + account layout for coxcli.cc, and the form frame the
   payment pages share (buy/index.html, buy/success/index.html load this file:
   .auth .auth-form .field .field__label .field__input stay as they are).

   CLASS VOCABULARY
     form     .auth .auth-form .auth-alt
              .field (+ __label/__input/__hint)
     account  .account-page (compact frame width; [hidden] wins over layout)
              .account-card (+ __label __head) .account-status (+ --ok --alert
              --pending --muted) .account-table .account-actions .btn--cancel
              .account-who .account-headline .account-lede .account-note
              .account-access .account-price .account-renewal .account-pending
              .account-notice .account-confirm (+ __text __pending)
              .account-codes .account-code (+ __row __value __meta __state)
   ============================================================================ */

/* ---- Login ----------------------------------------------------------------- */
.auth {
  max-width: 28rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}

.auth-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field__input:hover { border-color: var(--color-text-muted); }
.field__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}
.field__input::placeholder { color: var(--color-text-muted); opacity: 0.6; }

.field__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.auth-alt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ---- Account ----------------------------------------------------------------- */
.account-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-card__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.account-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.account-status::before { content: "●"; }
.account-status--ok { color: var(--color-ok); }

/* One table style for usage meters + billing history. */
.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.account-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.account-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.account-table tr:last-child td { border-bottom: 0; }
.account-table .num { font-family: var(--font-mono); }

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Cancel is a ghost button tinted danger — scoped here, not a new shared
   variant (components.css stays untouched). */
.btn--cancel {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.btn--cancel:hover {
  background: var(--color-danger);
  color: var(--color-bg);
}

/* ---- Compact account pages (login.html, account.html) ------------------------
   Both pages sit in the payment pages' frame (body.payment-page, buy.css); the
   account view gets a little more width for its code list and payment table. */
.account-page.payment-page .auth { max-width: 40rem; }
/* The rules here set display on several containers; a hidden one stays hidden. */
.account-page.payment-page [hidden] { display: none; }

.account-lede,
.account-note,
.account-headline,
.account-access,
.account-price,
.account-renewal,
.account-pending,
.account-notice {
  margin: 0;
  line-height: var(--leading-normal);
}
.account-lede { color: var(--color-text-muted); }
.account-note { color: var(--color-text-muted); font-size: var(--text-sm); }

.account-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.account-who p { margin: 0; overflow-wrap: anywhere; }

.account-headline {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.account-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.account-access { font-weight: 700; }
.account-price,
.account-renewal,
.account-pending,
.account-notice { font-size: var(--text-sm); }
.account-pending { color: var(--color-accent); }
.account-notice { font-weight: 700; }

.account-page .account-table .num { white-space: nowrap; }

.account-status--alert { color: var(--color-danger); }
.account-status--pending { color: var(--color-accent); }
.account-status--muted { color: var(--color-text-muted); }

.account-confirm {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
}
.account-confirm__text,
.account-confirm__pending {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.account-codes {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-code {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.account-code:last-child { padding-bottom: 0; border-bottom: 0; }
.account-code__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.account-code__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.account-code__meta,
.account-code__state {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}