/* ============================================
   ASHBORN - Account (sign in / sign up / management)
   Extends css/styles.css + css/field.css design tokens
   ============================================ */

body.subpage .site-header { transform: none; }

[hidden] { display: none !important; }

/* ---- Auth gate ---- */
.acct-panel {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 165, 67, 0.08) 0%, transparent 60%),
        var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.acct-panel--discord-only { text-align: center; }

.acct-panel__lead {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.acct-oauth__btn {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.5rem;
}

/* ---- Dashboard ---- */
.acct-profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.acct-profile__lead {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.acct-avatar-upload {
    position: relative;
    flex-shrink: 0;
}

.acct-avatar-preview {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.acct-avatar-preview--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 165, 67, 0.15);
    color: var(--color-amber-light);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
}

.acct-avatar-upload__btn {
    display: block;
    text-align: center;
    margin-top: 0.3rem;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
}

.acct-avatar-upload__btn:hover { color: var(--color-amber-light); }

.acct-profile__name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
}

.acct-profile__email {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.acct-profile__ranks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.acct-profile__name-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.acct-name-edit__btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.7rem;
    cursor: pointer;
    transition: border-color var(--transition-normal), color var(--transition-normal);
}

.acct-name-edit__btn:hover {
    border-color: var(--color-amber);
    color: var(--color-amber-light);
}

.acct-name-edit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.acct-name-edit input {
    padding: 0.5rem 0.8rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-amber-light);
    font-family: var(--font-heading);
    font-size: 1rem;
    outline: none;
    max-width: 220px;
}

.acct-name-edit input:focus { border-color: var(--color-amber); }

.acct-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
}

.acct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
}

.acct-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.acct-card:hover {
    border-color: rgba(212, 165, 67, 0.35);
    transform: translateY(-2px);
}

.acct-card--wide { grid-column: 1 / -1; }

.acct-card--warn {
    border-color: rgba(184, 87, 74, 0.5);
    color: #c08a80;
    max-width: 700px;
    margin: 0 auto;
}

.acct-card--warn code {
    background: var(--color-bg-primary);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.acct-card__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-amber-light);
    margin-bottom: var(--space-sm);
}

.acct-card__body {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.acct-code {
    margin-top: var(--space-md);
    text-align: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-amber);
    border-radius: var(--border-radius);
    padding: var(--space-md);
}

.acct-code__value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    color: var(--color-amber-light);
}

.acct-code__timer {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.linked-device, .reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    gap: var(--space-md);
}

.linked-device:last-child, .reward-row:last-child { border-bottom: none; }

.linked-device__label { color: var(--color-text-primary); font-size: 0.9rem; }
.linked-device__meta { color: var(--color-text-muted); font-size: 0.78rem; }

.reward-row--earned .reward-row__title { color: var(--color-amber-light); }
.reward-row__title { color: var(--color-text-secondary); font-size: 0.9rem; }
.reward-row__badge {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.reward-row--earned .reward-row__badge { border-color: var(--color-amber); color: var(--color-amber-light); }

/* ---- Field Rank progress ---- */
.acct-rank-progress {
    max-width: 900px;
    margin: 0 auto var(--space-2xl);
}

.acct-rank-progress__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.acct-rank-progress__row span:first-child { color: var(--color-amber-light); font-family: var(--font-heading); }

.acct-rank-progress__track {
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.acct-rank-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-amber-dark), var(--color-amber-light));
    box-shadow: 0 0 10px var(--color-amber-glow);
    transition: width 600ms ease;
}

/* ---- Account standing ---- */
.acct-standing--good { color: #7dba6a; }
.acct-standing--flagged { color: #b8574a; }

@media (max-width: 700px) {
    .acct-grid { grid-template-columns: 1fr; }
    .acct-profile { flex-direction: column; gap: var(--space-sm); text-align: center; }
}