/*
 * Account slice — registration, sign-in, second factor, credentials, profile.
 *
 * Consumes tokens.css only; there is not a literal colour in this file, which is what makes the
 * light/dark toggle (NFR-ACC-001) a token change rather than an audit of every stylesheet.
 *
 * Two accessibility rules shape most of what is below:
 *   - NFR-ACC-001: focus is always visible, status is never colour alone (every cue in the markup
 *     pairs a glyph and a word with its colour), and nothing here removes an outline.
 *   - NFR-ACC-002: interactive targets are at least 44px, and the layout is single-column until
 *     there is genuinely room for two — the profile page gets used on a phone at a workbench.
 */

/* --- Page shells ---------------------------------------------------------- */

.auth {
    display: flex;
    justify-content: center;
    padding-block: var(--space-4);
}

.auth__card {
    width: 100%;
    max-width: 30rem;
}

.auth--wide .auth__card {
    max-width: 42rem;
}

.auth__title {
    margin-bottom: var(--space-2);
}

.auth__intro {
    color: var(--color-text-muted);
}

.auth__tone {
    margin-bottom: var(--space-4);
}

.auth__form {
    margin-top: var(--space-5);
}

.auth__footer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.account__columns {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

/* Two columns only once the narrower one still clears a comfortable reading measure. */
@media (min-width: 52rem) {
    .account__columns {
        grid-template-columns: minmax(16rem, 22rem) 1fr;
        align-items: start;
    }
}

.account__email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.account__email-address {
    font-family: var(--font-mono);
    word-break: break-all;
}

.card--danger {
    border-color: var(--color-danger);
}

/* --- Fields --------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field + .field,
.fieldset + .field,
.field + .fieldset {
    margin-top: var(--space-4);
}

.field__label,
.checkbox__label,
.radio-card__label {
    font-weight: 600;
    line-height: var(--leading-tight);
}

.field__optional {
    margin-left: var(--space-2);
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.field__hint {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.field__readonly {
    margin: 0;
    padding: var(--space-2) 0;
    font-family: var(--font-mono);
    word-break: break-all;
}

/* Empty by default — the validation tag helper only fills it when there is something to say. */
.field__error:not(:empty) {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-danger);
}

/* The glyph is what keeps this from being a colour-only cue (NFR-ACC-001). */
.field__error:not(:empty)::before {
    content: "✕ ";
}

.field-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin-top: var(--space-4);
}

@media (min-width: 34rem) {
    .field-row {
        grid-template-columns: 1fr 1fr;
    }
}

.field-row .field + .field {
    margin-top: 0;
}

.input,
.select {
    width: 100%;
    /* NFR-ACC-002: 44px minimum target. */
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.input:hover,
.select:hover {
    border-color: var(--color-accent);
}

.input--multiline {
    min-height: 5rem;
    resize: vertical;
}

.input--code {
    max-width: 12rem;
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    letter-spacing: 0.25em;
}

.input--file {
    padding: var(--space-2);
    background-color: var(--color-bg-subtle);
}

.input--file::file-selector-button {
    min-height: 2rem;
    margin-right: var(--space-3);
    padding: var(--space-1) var(--space-3);
    font: inherit;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Aria-invalid is set by the browser's own constraint validation and by the tag helper's
   input-validation-error class; both get the same treatment so they cannot look different. */
.input[aria-invalid="true"],
.input.input-validation-error,
.select.input-validation-error {
    border-color: var(--color-danger);
    border-width: 2px;
}

.fieldset {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.fieldset__legend {
    padding-inline: var(--space-2);
    font-weight: 650;
}

/* --- Checkboxes and radio cards ------------------------------------------- */

.checkbox,
.radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.radio-card {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.radio-card:has(.radio-card__input:checked) {
    border-color: var(--color-accent);
    background-color: var(--color-accent-subtle);
}

.checkbox__input,
.radio-card__input {
    /* Large enough to hit on a touch screen without a wrapper trick (NFR-ACC-002). */
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.125rem;
    accent-color: var(--color-accent);
}

.checkbox__text,
.radio-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.checkbox__label,
.radio-card__label {
    cursor: pointer;
}

/* --- Legal documents (FR-SAFE-004) ---------------------------------------- */

.legal {
    margin-top: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-subtle);
}

.legal__summary {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.legal__body {
    max-height: 16rem;
    overflow-y: auto;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    /* The body arrives as source text and is rendered as text, never as markup. */
    white-space: pre-wrap;
}

/* --- Status, errors and empty states (FR-UX-006) -------------------------- */

.status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.status__glyph {
    font-weight: 700;
}

.status__label {
    font-weight: 700;
}

.status__label::after {
    content: ":";
}

.status--success {
    color: var(--color-success);
    background-color: var(--color-success-subtle);
    border-color: var(--color-success);
}

.status--warning {
    color: var(--color-warning);
    background-color: var(--color-warning-subtle);
    border-color: var(--color-warning);
}

.status--danger {
    color: var(--color-danger);
    background-color: var(--color-danger-subtle);
    border-color: var(--color-danger);
}

.status--neutral {
    color: var(--color-text);
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}

.form-errors {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 2px solid var(--color-danger);
    border-radius: var(--radius-md);
    background-color: var(--color-danger-subtle);
}

.form-errors__title {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    color: var(--color-danger);
}

.form-errors__glyph {
    margin-right: var(--space-1);
}

.form-errors__list {
    margin: 0;
    padding-left: var(--space-5);
}

.form-errors__list a {
    color: var(--color-danger);
}

.empty-state {
    margin-top: var(--space-5);
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    text-align: center;
}

.empty-state__glyph {
    margin: 0 0 var(--space-2);
    font-size: var(--text-3xl);
    color: var(--color-text-muted);
}

.empty-state__title {
    font-size: var(--text-lg);
}

/* --- Avatar (FR-AUTH-006, NFR-SEC-003) ------------------------------------ */

.avatar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.avatar__image {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-subtle);
}

.avatar__image--preview {
    border-style: dashed;
    border-color: var(--color-accent);
}

.avatar__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 8rem;
    height: 8rem;
    margin: 0;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-subtle);
    text-align: center;
}

.avatar__glyph {
    font-size: var(--text-2xl);
    color: var(--color-text-muted);
}

/* --- Buttons -------------------------------------------------------------- */

.btn--danger {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
}

.btn--danger:hover {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
    filter: brightness(0.92);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Loading state (FR-UX-006). The button keeps its width so the layout does not jump when the
   label is swapped, and aria-disabled rather than disabled keeps it focusable and announced. */
.btn[aria-busy="true"] {
    opacity: 0.75;
    cursor: progress;
}