/* Login & install (uses minimal layout) */
.login__title { font-size: var(--fz-24); margin: 0 0 var(--sp-2); }
.login__sub   { color: var(--text-dim); margin: 0 0 var(--sp-5); }
.login__error {
    background: rgba(239,68,68,.1);
    border: 1px solid #7f1d1d;
    color: #fecaca;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
    font-size: var(--fz-12);
}
.login__code-input {
    text-align: center;
    font-size: var(--fz-24);
    letter-spacing: 0.4em;
    font-family: var(--font-mono);
}
.login__hint {
    margin-top: var(--sp-3);
    color: var(--text-dim);
    font-size: var(--fz-12);
    text-align: center;
}
/* Secondary link under a form — "Forgot password?", "Back to sign in". */
.login__alt {
    margin: var(--sp-4) 0 0;
    font-size: var(--fz-12);
    text-align: center;
}
.login__alt a { color: var(--text-dim); }
.login__alt a:hover { color: var(--accent); }
/* Live password-requirement checklist (password-check.js). Unmet rules are
   muted with a hollow ring; met rules turn green with a checkmark. */
.pwreq {
    list-style: none;
    margin: calc(var(--sp-2) * -1) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-1);
    font-size: var(--fz-12);
}
.pwreq__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-dim);
    transition: color .15s ease;
}
.pwreq__mark {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    border: 1.5px solid var(--text-dim);
    position: relative;
    transition: border-color .15s ease, background .15s ease;
}
.pwreq__item.is-met { color: var(--status-completed); }
.pwreq__item.is-met .pwreq__mark {
    border-color: var(--status-completed);
    background: var(--status-completed);
}
/* Checkmark, drawn with two borders so there's no extra asset. */
.pwreq__item.is-met .pwreq__mark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--bg-base);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
    .pwreq__item, .pwreq__mark { transition: none; }
}

.login__notice {
    background: rgba(34,197,94,.1);
    border: 1px solid #14532d;
    color: #bbf7d0;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
    font-size: var(--fz-12);
}