.security-settings {
    max-width: 36rem;
    min-width: 0;
}

.security-settings .settings-page__header {
    margin-bottom: 1.75rem;
}

.security-settings .security-content {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    min-width: 0;
}

.security-settings h2 {
    margin: 0;
    color: var(--av-text);
    font-size: .9375rem;
    font-weight: 680;
}

.security-settings .security-step-heading p {
    margin: 0;
    color: var(--av-text-muted);
    font-size: .8125rem;
    line-height: 1.6;
}

.security-settings .security-step-heading {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
}

.security-settings .security-step-heading h2 {
    margin: .05rem 0 .25rem;
}

.security-settings .security-step-number {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid var(--av-border);
    border-radius: 50%;
    background: var(--av-surface-subtle);
    color: var(--av-text-muted);
    font-size: .75rem;
    font-weight: 650;
}

.security-settings .security-step--divided {
    padding-top: 1.5rem;
    border-top: 1px solid var(--av-border);
}

.security-settings .security-step {
    display: grid;
    gap: 1.25rem;
}

.security-settings .security-form {
    max-width: 36rem;
    min-width: 0;
}

.security-settings .security-field {
    display: grid;
    align-content: start;
    min-width: 0;
}

.security-settings .security-field--code {
    max-width: 14rem;
}

.security-settings .security-field > label {
    margin-bottom: .48rem;
}

.security-settings .security-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: .15em;
}

.security-settings .validation-message {
    margin-top: .38rem;
    color: var(--av-danger);
    font-size: .6875rem;
}

.security-settings .security-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.security-settings .security-actions--flush {
    margin-top: 0;
}

.security-settings .security-reload {
    justify-self: start;
}

@media (max-width: 560px) {
    .security-settings .security-actions .button {
        flex: 1 1 auto;
    }
}