/* Debyko.Account — only --dk-* tokens (tokens.css, Debyko.Web.Chrome). One accent, danger stated in ink. */

html { background: var(--dk-surface-page); }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--dk-text-accent); }
code, pre { font-family: var(--dk-font-mono); }

.ac-main { width: 100%; max-width: 960px; margin: 0 auto; padding: var(--dk-space-8) var(--dk-space-6) var(--dk-space-10); flex: 1; box-sizing: border-box; }

.ac-title { font: var(--dk-type-display); margin-bottom: var(--dk-space-4); }
.ac-lead { font: var(--dk-type-body); color: var(--dk-text-secondary); max-width: 60ch; margin: 0 0 var(--dk-space-5); }
.ac-note { background: var(--dk-accent-tint); border-left: 3px solid var(--dk-border-accent); padding: var(--dk-space-3) var(--dk-space-4);
  margin: var(--dk-space-4) 0; }
.ac-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--dk-space-5); flex-wrap: wrap; }
.ac-list { max-width: 64ch; line-height: 1.6; }

.ac-panel { background: var(--dk-surface-panel); border: var(--dk-border-w) solid var(--dk-border-hairline); border-radius: var(--dk-radius-1);
  padding: var(--dk-space-6); margin: var(--dk-space-6) 0; overflow-x: auto; }
.ac-panel h2 { font: var(--dk-type-heading); margin-bottom: var(--dk-space-3); }

.ac-form { display: flex; flex-direction: column; gap: var(--dk-space-2); max-width: 420px; margin: var(--dk-space-4) 0; }
.ac-form--row { flex-direction: row; align-items: center; flex-wrap: wrap; max-width: none; }
.ac-inline { display: inline-block; margin: 0 var(--dk-space-2) var(--dk-space-2) 0; }
.ac-input { font: var(--dk-type-body); height: var(--dk-control-h-lg); padding: 0 var(--dk-space-4); border: var(--dk-border-w) solid var(--dk-border-strong);
  border-radius: var(--dk-radius-1); background: var(--dk-surface-raised); color: var(--dk-text-primary); min-width: 240px; }
.ac-input:focus { outline: 2px solid var(--dk-focus-ring); }

.ac-btn { font: var(--dk-type-subheading); height: var(--dk-control-h); padding: 0 var(--dk-space-4); border-radius: var(--dk-radius-1);
  border: var(--dk-border-w) solid var(--dk-border-strong); background: var(--dk-surface-subtle); color: var(--dk-text-primary);
  cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.ac-btn--primary { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-accent-fg); }
.ac-btn--danger { background: var(--dk-danger-bg); color: var(--dk-danger-fg); border-color: var(--dk-danger-rule); }
.ac-link { font: var(--dk-type-subheading); }
/* "Checkout opens soon" (Billing:CheckoutOpen false): a real disabled button, visibly not pressable. */
.ac-btn:disabled, .ac-btn[aria-disabled="true"] { background: var(--dk-surface-subtle); border-color: var(--dk-border-hairline);
  color: var(--dk-text-faint); cursor: not-allowed; }
.ac-soon { margin: 0; }
/* The trial and refund line where a purchase starts (BillingTerms.TrialAndRefund). */
.ac-terms { font: var(--dk-type-meta); color: var(--dk-text-secondary); margin: 0; }

.ac-table { width: 100%; border-collapse: collapse; margin: var(--dk-space-4) 0; }
.ac-table th { font: var(--dk-type-label); text-transform: uppercase; color: var(--dk-text-faint); text-align: left;
  padding: var(--dk-space-2); border-bottom: var(--dk-border-w) solid var(--dk-border-hairline); }
.ac-table td { padding: var(--dk-space-2); border-bottom: var(--dk-border-w) solid var(--dk-border-hairline); vertical-align: top; }

.ac-key { display: flex; gap: var(--dk-space-3); align-items: center; flex-wrap: wrap; background: var(--dk-surface-inset);
  border: var(--dk-border-w) solid var(--dk-border-accent); padding: var(--dk-space-4); margin: var(--dk-space-4) 0; }
.ac-key code { font: var(--dk-type-num); word-break: break-all; }
.ac-code { background: var(--dk-surface-inset); padding: var(--dk-space-4); overflow-x: auto; font: var(--dk-type-meta); }

.ac-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--dk-space-4); margin: var(--dk-space-4) 0; }
.ac-plan { border: var(--dk-border-w) solid var(--dk-border-hairline); padding: var(--dk-space-4); display: flex; flex-direction: column; gap: var(--dk-space-2); }
.ac-plan h3 { font: var(--dk-type-heading); }
.ac-price { font: var(--dk-type-num-lg); margin: 0; }

@media (max-width: 600px) {
  .ac-main { padding: var(--dk-space-6) 16px var(--dk-space-9); }
  .ac-input { min-width: 0; width: 100%; }
}

/* The confirmation dialog. A native <dialog>, so Escape, the top layer and focus trapping are the
   browser's job and not ours; what is ours is that it looks like the rest of the page. window.confirm
   cannot: it is styled by the operating system, it says "127.0.0.1 says", and it cannot tell a plan
   switch from revoking a key. */
.ac-dialog { border: var(--dk-border-w) solid var(--dk-border-hairline); border-radius: var(--dk-radius-2);
  background: var(--dk-surface-raised); color: var(--dk-text-primary); box-shadow: var(--dk-shadow-modal);
  padding: 0; width: min(30rem, calc(100vw - 2 * var(--dk-space-5))); }
.ac-dialog::backdrop { background: var(--dk-scrim); }
.ac-dialog__body { margin: 0; padding: var(--dk-space-6); display: flex; flex-direction: column; gap: var(--dk-space-5); }
.ac-dialog__text { font: var(--dk-type-body); line-height: var(--dk-lh-relaxed); margin: 0; }
.ac-dialog__actions { display: flex; justify-content: flex-end; gap: var(--dk-space-3); flex-wrap: wrap; }

@media (max-width: 600px) {
  /* The confirming button last on a narrow screen too: the thumb rests where Cancel is. */
  .ac-dialog__actions { flex-direction: column-reverse; }
  .ac-dialog__actions .ac-btn { width: 100%; }
}
/* 2026-10-06: Stripe Checkout in a dialog (checkout.js) */
.ac-checkout { width: min(100vw - 2 * var(--dk-space-4), 1000px); max-height: calc(100vh - 2 * var(--dk-space-4)); padding: 0; overflow: auto; }
.ac-checkout__bar { display: flex; justify-content: flex-end; padding: var(--dk-space-3); position: sticky; top: 0; background: var(--dk-surface-page); z-index: 1; }
.ac-checkout__error { padding: 0 var(--dk-space-6); }
.ac-checkout__mount { min-height: 480px; }