/*
 * Sign-in, My eSIMs and the new eSIM after a purchase (engine/account.mjs and
 * account.js), on top of each site's own styles.css: its colours, type and
 * buttons (.btn, .btn-primary, .btn-quiet, .btn-small) carry over.
 */
.account-page [data-state]:not([data-state-visible]) { display: none; }
.account-narrow { max-width: 30rem; }
.account-note { color: var(--muted, var(--ink-2, #55606a)); }
.account-small { font-size: 0.9rem; margin: 0.5rem 0 0; }
.account-alt { margin-top: 1.5rem; }

.account-message { border-radius: var(--radius-small, 6px); padding: 0.75rem 1rem; margin: 1rem 0; border: 1px solid var(--line, #d9dee3); }
.account-message-error { border-color: #d64545; background: #fdf1f1; color: #8a1f1f; }
.account-message-success { border-color: #2e8b57; background: #eef8f2; color: #1d5c39; }
.account-message-info { background: var(--surface, var(--bg-2, #f6f8fa)); }

.account-form { display: grid; gap: 1rem; margin: 1.25rem 0; }
.account-field { display: grid; gap: 0.35rem; font-weight: 600; }
.account-field input[type="email"],
.account-field input[type="password"],
.account-field input[type="text"] {
	font: inherit; font-weight: 400; padding: 0.65rem 0.75rem; width: 100%; box-sizing: border-box;
	border: 1px solid var(--line, #c9d0d6); border-radius: var(--radius-small, 6px); background: var(--bg, #fff); color: var(--ink, #1b2730);
}
.account-field input:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.account-check { display: flex; gap: 0.5rem; align-items: center; }
.account-form .btn { justify-self: start; }

.account-or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted, var(--ink-2, #55606a)); margin: 1.25rem 0 0.75rem; }
.account-or::before, .account-or::after { content: ""; flex: 1; border-top: 1px solid var(--line, #d9dee3); }

.account-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.account-who { margin: 0; color: var(--muted, var(--ink-2, #55606a)); }

.account-spinner {
	width: 2rem; height: 2rem; margin: 1.5rem 0 0.5rem; border-radius: 50%;
	border: 3px solid var(--line, #d9dee3); border-top-color: var(--ink, #1b2730);
	animation: account-spin 0.9s linear infinite;
}
@keyframes account-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .account-spinner { animation-duration: 3s; } }

.account-esims { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 1rem; }
.account-esim {
	border: 1px solid var(--line, #d9dee3); border-radius: var(--radius, 10px); padding: 1rem 1.25rem;
	background: var(--surface, var(--bg, #fff));
}
.account-esim-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.account-esim-head h3 { margin: 0; font-size: 1.1rem; }
.account-chip { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--line, #d9dee3); white-space: nowrap; }
.account-chip.is-ordered { background: #eef2fb; color: #2f4b8a; border-color: #c8d4ef; }
.account-chip.is-ready-for-download { background: #fff6e5; color: #7a4b00; border-color: #f0d49a; }
.account-chip.is-activated { background: #eaf7ef; color: #1d5c39; border-color: #b9e0c8; }
.account-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0.75rem 0 0; }
.account-facts dt { font-size: 0.8rem; color: var(--muted, var(--ink-2, #55606a)); }
.account-facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-quota { margin: 0.75rem 0 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.account-install { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line, #d9dee3); }
.account-qr { display: block; width: 220px; height: 220px; margin: 0.75rem 0; background: #fff; padding: 8px; border: 1px solid var(--line, #d9dee3); border-radius: var(--radius-small, 6px); }
.account-code { display: flex; gap: 0.5rem; align-items: center; }
.account-code input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }