/* ════════════════════════════════════════════════════════════
   Crownforge — Account (Identity/auth + manage pages)
   Route-scoped sheet loaded by AccountLayout via <HeadContent> (the board/deck-editor/lobby pattern),
   replacing the vendored Bootstrap the scaffold shipped with. Every rule is scoped under .cf-account-root
   (the deck-editor `.cf-editor-root` precedent) so nothing leaks onto MainLayout-based pages. The pages
   render inside MainLayout's chrome on the parchment body; app.css owns base element styling (headings,
   links, focus ring) — this sheet supplies the form/button/alert/nav primitives the Account surface uses.

   Contents — Cmd-F the ═══ banner text to jump:
     · SHELL & LAYOUT   root column, auth grid, panels, panes, dividers
     · FORMS            field · label · input · select · checkbox · hints · validation
     · BUTTONS          primary / danger / secondary / oauth / link-button / rows
     · ALERTS           status + warning/info/danger/success banners
     · MANAGE           settings grid + sectioned nav (ManageNavMenu)
     · DETAILS          tables, recovery codes, authenticator key, funnel CTAs
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   SHELL & LAYOUT
   ════════════════════════════════════════════════════════════ */

.cf-account-root {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--cf-space-2) 0 var(--cf-space-8);
}

/* Auth-page grid: the local-account form beside the external-provider panel; single column on phones. */
.cf-account-root .cf-account__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cf-space-6);
    align-items: start;
}

@media (min-width: 960px) {
    .cf-account-root .cf-account__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.cf-account-root .cf-account__panel {
    padding: var(--cf-space-6);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-1);
}

.cf-account-root .cf-account__panel-title {
    margin: 0 0 var(--cf-space-2);
    font-size: var(--cf-text-xl);
}

/* Single-form pages (forgot/reset password, the manage forms) — a readable column, not full-bleed. */
.cf-account-root .cf-account__pane {
    max-width: 30rem;
}

.cf-account-root .cf-account__pane--wide {
    max-width: 36rem;
}

.cf-account-root hr {
    height: 0;
    margin: var(--cf-space-4) 0;
    border: 0;
    border-top: 1px solid var(--cf-border);
}

.cf-account-root .cf-account__lede {
    max-width: 60ch;
    color: var(--cf-text-muted);
}

/* The "forgot password / register / resend" link list under the login form. */
.cf-account-root .cf-account__links {
    margin-top: var(--cf-space-4);
    font-size: var(--cf-text-sm);
}

.cf-account-root .cf-account__links p {
    margin: 0 0 var(--cf-space-2);
}

/* ════════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════════ */

.cf-account-root .cf-account__field {
    margin-bottom: var(--cf-space-4);
}

.cf-account-root .cf-account__label {
    display: block;
    margin-bottom: var(--cf-space-1);
    font-size: var(--cf-text-sm);
    font-weight: 600;
    color: var(--cf-text);
}

.cf-account-root .cf-account__input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
    color: var(--cf-text);
    font-family: inherit;
    font-size: var(--cf-text-md);
    line-height: 1.4;
}

.cf-account-root .cf-account__input::placeholder {
    color: var(--cf-text-muted);
    opacity: 0.75;
}

/* The box-shadow ring replaces the global :focus-visible outline as the (still clearly visible) focus cue. */
.cf-account-root .cf-account__input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--cf-brand) 55%, var(--cf-border-strong));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-brand) 22%, transparent);
}

/* InputBase sets aria-invalid alongside its `invalid` class — key off the attribute (BEM-safe). */
.cf-account-root .cf-account__input[aria-invalid] {
    border-color: var(--cf-danger);
}

.cf-account-root .cf-account__input:disabled {
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
    cursor: not-allowed;
}

.cf-account-root .cf-account__input--tall {
    min-height: 110px;
    resize: vertical;
}

/* Input + trailing affix (the verified-email check mark). */
.cf-account-root .cf-account__input-row {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
}

.cf-account-root .cf-account__input-row .cf-account__input {
    flex: 1 1 auto;
}

.cf-account-root .cf-account__affix-ok {
    color: var(--cf-success-fg);
    font-weight: 700;
}

.cf-account-root .cf-account__select {
    padding: 8px 10px;
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
    color: var(--cf-text);
    font-family: inherit;
    font-size: var(--cf-text-sm);
}

.cf-account-root .cf-account__check {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
    color: var(--cf-text);
    cursor: pointer;
}

.cf-account-root .cf-account__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cf-brand);
}

.cf-account-root .cf-account__hint {
    margin-top: var(--cf-space-1);
    font-size: var(--cf-text-xs);
    color: var(--cf-text-muted);
}

/* Gameplay page: per-phase label + select rows and their fieldsets. */
.cf-account-root .cf-account__fieldset {
    margin: 0 0 var(--cf-space-6);
    padding: 0;
    border: 0;
}

.cf-account-root .cf-account__legend {
    padding: 0;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-lg);
    font-weight: 600;
}

.cf-account-root .cf-account__note {
    margin: var(--cf-space-2) 0 var(--cf-space-3);
    font-size: var(--cf-text-sm);
    color: var(--cf-text-muted);
}

.cf-account-root .cf-account__setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-3);
    max-width: 24rem;
    margin-bottom: var(--cf-space-2);
}

.cf-account-root .cf-account__setting-row .cf-account__label {
    margin-bottom: 0;
    font-weight: 500;
}

/* Validation — ValidationMessage always carries `validation-message`; the summary <ul> gets our class. */
.cf-account-root .validation-message,
.cf-account-root .cf-account__validation {
    margin-top: var(--cf-space-1);
    color: var(--cf-danger-fg);
    font-size: var(--cf-text-sm);
}

.cf-account-root .cf-account__validation-summary {
    margin: 0 0 var(--cf-space-3);
    padding: 0;
    list-style: none;
    color: var(--cf-danger-fg);
    font-size: var(--cf-text-sm);
}

.cf-account-root .cf-account__validation-summary:empty {
    display: none;
}

.cf-account-root .cf-account__validation-summary .validation-message {
    margin: 0 0 2px;
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */

.cf-account-root .cf-account__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-2);
    min-height: 44px;   /* §8 touch-target floor - the 10px padding alone computes ~40px */
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--cf-radius-md);
    font-family: inherit;
    font-size: var(--cf-text-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--cf-dur-fast) var(--cf-ease),
        color var(--cf-dur-fast) var(--cf-ease),
        border-color var(--cf-dur-fast) var(--cf-ease);
}

/* Several controls are link-buttons (<a class="cf-account__btn …">) — never underline them. */
.cf-account-root .cf-account__btn:hover {
    text-decoration: none;
}

.cf-account-root .cf-account__btn:active {
    transform: translateY(0.5px);
}

.cf-account-root .cf-account__btn--primary {
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--cf-brand) 22%, transparent);
}

.cf-account-root .cf-account__btn--primary:hover {
    background: var(--cf-brand-hover);
    color: var(--cf-brand-contrast);
}

/* Destructive actions only (delete account, disable/reset 2FA) — --cf-danger is error semantics. */
.cf-account-root .cf-account__btn--danger {
    background: var(--cf-danger);
    color: var(--cf-brand-contrast);
}

.cf-account-root .cf-account__btn--danger:hover {
    background: color-mix(in srgb, var(--cf-danger) 82%, var(--cf-overlay-dark));
    color: var(--cf-brand-contrast);
}

.cf-account-root .cf-account__btn--secondary {
    background: transparent;
    border-color: var(--cf-border-strong);
    color: var(--cf-text);
}

.cf-account-root .cf-account__btn--secondary:hover {
    background: var(--cf-surface-hover);
    color: var(--cf-text);
}

/* External-provider sign-in (Google) — the conventional quiet white OAuth button. */
.cf-account-root .cf-account__btn--oauth {
    background: var(--cf-surface);
    border-color: var(--cf-border-strong);
    color: var(--cf-text);
    box-shadow: var(--cf-shadow-1);
}

.cf-account-root .cf-account__btn--oauth:hover {
    background: var(--cf-surface-hover);
    color: var(--cf-text);
}

.cf-account-root .cf-account__btn--full {
    width: 100%;
}

.cf-account-root .cf-account__btn:disabled {
    background: var(--cf-surface-2);
    border-color: var(--cf-border);
    color: color-mix(in srgb, var(--cf-text-muted) 60%, transparent);
    box-shadow: none;
    cursor: not-allowed;
}

/* Inline link-styled button (e.g. "Send verification email" posting a sibling form). */
.cf-account-root .cf-account__btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cf-brand);
    font: inherit;
    font-size: var(--cf-text-sm);
    font-weight: 600;
    cursor: pointer;
}

.cf-account-root .cf-account__btn-link:hover {
    color: var(--cf-brand-hover);
    text-decoration: underline;
}

.cf-account-root .cf-account__field .cf-account__btn-link {
    margin-top: var(--cf-space-2);
}

.cf-account-root .cf-account__btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cf-space-3);
    margin: var(--cf-space-3) 0;
}

.cf-account-root .cf-account__inline-form {
    display: inline-block;
}

/* ════════════════════════════════════════════════════════════
   ALERTS — StatusMessage + the static warning/info banners
   ════════════════════════════════════════════════════════════ */

.cf-account-root .cf-account__alert {
    margin: 0 0 var(--cf-space-4);
    padding: var(--cf-space-3) var(--cf-space-4);
    border: 1px solid;
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-text-sm);
    line-height: 1.55;
}

.cf-account-root .cf-account__alert p {
    margin: 0 0 var(--cf-space-2);
}

.cf-account-root .cf-account__alert p:last-child {
    margin-bottom: 0;
}

.cf-account-root .cf-account__alert--success {
    background: color-mix(in srgb, var(--cf-success) 10%, var(--cf-surface));
    border-color: color-mix(in srgb, var(--cf-success) 40%, var(--cf-border));
    color: var(--cf-success-fg);
}

.cf-account-root .cf-account__alert--danger {
    background: color-mix(in srgb, var(--cf-danger) 10%, var(--cf-surface));
    border-color: color-mix(in srgb, var(--cf-danger) 45%, var(--cf-border));
    color: var(--cf-danger-fg);
}

.cf-account-root .cf-account__alert--warning {
    background: color-mix(in srgb, var(--cf-warning) 12%, var(--cf-surface));
    border-color: color-mix(in srgb, var(--cf-warning) 45%, var(--cf-border));
    color: var(--cf-warning-fg);
}

.cf-account-root .cf-account__alert--info {
    background: color-mix(in srgb, var(--cf-accent) 12%, var(--cf-surface));
    border-color: color-mix(in srgb, var(--cf-accent) 40%, var(--cf-border));
    color: var(--cf-info-fg);
}

/* ════════════════════════════════════════════════════════════
   MANAGE — settings grid + the sectioned nav
   ════════════════════════════════════════════════════════════ */

.cf-account-root .cf-account__manage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cf-space-6);
    align-items: start;
    margin-top: var(--cf-space-4);
}

@media (min-width: 720px) {
    .cf-account-root .cf-account__manage {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: var(--cf-space-8);
    }
}

.cf-account-root .cf-account-nav__section {
    margin-bottom: var(--cf-space-5);
}

.cf-account-root .cf-account-nav__title {
    margin-bottom: var(--cf-space-2);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-account-root .cf-account-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cf-account-root .cf-account-nav__link {
    display: block;
    padding: 6px 10px;
    border-radius: var(--cf-radius-sm);
    color: var(--cf-text);
    font-size: var(--cf-text-sm);
    text-decoration: none;
}

.cf-account-root .cf-account-nav__link:hover {
    background: var(--cf-surface-hover);
    text-decoration: none;
}

.cf-account-root .cf-account-nav__link.active {
    background: color-mix(in srgb, var(--cf-brand) 10%, transparent);
    color: var(--cf-brand);
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   DETAILS — tables, recovery codes, authenticator key, funnel CTAs
   ════════════════════════════════════════════════════════════ */

.cf-account-root .cf-account__table {
    width: 100%;
    max-width: 30rem;
    border-collapse: collapse;
}

.cf-account-root .cf-account__table td {
    padding: var(--cf-space-2) var(--cf-space-3);
    border-bottom: 1px solid var(--cf-border);
}

.cf-account-root .cf-account__table td:last-child {
    text-align: right;
}

.cf-account-root .cf-account__codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--cf-space-2);
    max-width: 30rem;
    margin-top: var(--cf-space-4);
}

.cf-account-root .cf-account__code,
.cf-account-root kbd {
    display: inline-block;
    padding: var(--cf-space-1) var(--cf-space-2);
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    font-family: var(--cf-font-mono);
    font-size: var(--cf-text-sm);
}

.cf-account-root .cf-account__code {
    text-align: center;
    letter-spacing: 0.06em;
}

/* Post-register funnel: the quiet "while you wait" pointer and the confirmed-email CTA row. */
.cf-account-root .cf-account__funnel {
    max-width: 60ch;
    margin-top: var(--cf-space-6);
    padding-top: var(--cf-space-4);
    border-top: 1px solid var(--cf-border);
    font-size: var(--cf-text-sm);
    color: var(--cf-text-muted);
}

.cf-account-root .cf-account__funnel p {
    margin: 0;
}

.cf-account-root .cf-account__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-3);
    margin-top: var(--cf-space-5);
}

/* ── coarse pointers (touch) — the §8 ~44px touch-target floor (board.css / deck-editor.css rule) ──
   The buttons hold the floor unconditionally (min-height above); the quieter selects and manage-nav
   links grow to it only for touch, keeping the desktop forms dense for a precise mouse. */
@media (pointer: coarse) {
    .cf-account-root .cf-account__select { min-height: 44px; }

    .cf-account-root .cf-account-nav__link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}