/*
 * The readers' sign-in (the owner's proposal 19, 2026-10-23, "Kóði í tölvupósti fremstur"): on the sign-in pages'
 * card (templates/account/base.html: signing in, the code by e-mail, a new account, a new password, an address to
 * confirm) and in the site's sign-in dialog (core/modal_user.html), their parts scoped by .ms-signin. On
 * site/styrkja/styrkja.css's tokens and site/minsida/minsida.css's buttons, fields and outlets' looks (.ms--<outlet>:
 * the headline face from --ms-display, Mannlíf's square corners and red primary). One primary button a form, the rest
 * outlined; dark by the tokens. Not on the admin host, whose sign-in is Snati's own (snati/auth_base.html).
 */

/* The pages: one card on Mín síða's light surface */
.ms-auth { display: grid; justify-items: center; align-content: start; padding: 56px 20px 80px; }
.ms-auth__card { width: 100%; max-width: 440px; padding: 32px 32px 26px; border: 1px solid var(--sp-line); border-radius: var(--ms-radius); background: var(--sp-card); }
.sp .ms-auth__card .ms-title { margin: 0 0 8px; font-size: 34px; }

/* The dialog: its tabs' content, on the dialog's own ground, a little tighter than the pages' card */
.sp.ms.ms-modal { padding: 0; background: none; overflow: visible; font-size: 16px; }
.ms-modal.ms-signin .ms-hint { margin-bottom: 16px; }
.ms-modal.ms-signin .ms-btn { padding: 12px 16px; }
.ms-modal.ms-signin .ms-or { margin: 14px 0; }
.ms-modal.ms-signin .ms-auth__foot { margin-top: 18px; padding-top: 14px; }
/* Its frame while it holds the sign-in: scrolled when taller than the window (the site's stylesheets centre it by a
   translate, which cuts a tall one's top off, and a phone can't scroll it) */
body.modal-is-active #modal-user.active:has(.ms-modal) { overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 576px) {
    body.modal-is-active #modal-user.active:has(.ms-modal) { display: flex; flex-direction: column; padding: 24px 0; }
    #modal-user:has(.ms-modal) .modal { top: auto; transform: none; margin: auto; flex: none; }
}
/* On a phone Mannlíf's sticky header (.mn-header, 320) would lie over the dialog's top (210 there): the dialog over it */
@media (max-width: 575.98px) {
    body.modal-is-active #modal-user.active:has(.ms--mannlif) { z-index: 330; }
}

/* The sign-in's parts */
.ms-signin :where(p) { margin: 0 0 12px; }
.ms-signin .ms-hint { margin: 0 0 22px; font-size: 15px; line-height: 1.5; }
.ms-signin .ms-hint strong { color: var(--sp-ink); overflow-wrap: anywhere; }
.ms-signin .ms-messages { margin: 0 0 20px; }
.ms-signin form { margin: 0; }

/* Fields: a label over its input, its errors under it */
.ms-field { margin: 0 0 14px; }
.ms-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ms-field__top a { color: var(--sp-muted); font-size: 14px; white-space: nowrap; }
.ms-signin input[aria-invalid="true"] { border-color: var(--ms-bad); }
.ms-auth__help { display: block; margin: 6px 0 0; color: var(--sp-muted); font-size: 14px; }
.ms-signin input.ms-auth__code { font-size: 22px; font-weight: 700; letter-spacing: .3em; text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums; }
/* A form's own error (a wrong password, too many tries): its whole box in the error's colour */
.ms-auth__error { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--ms-bad); border-radius: var(--ms-btn-radius); background: var(--ms-bad-bg); color: var(--ms-bad); font-size: 15px; }
.ms-auth__error .errorlist { margin: 0; color: inherit; font-size: inherit; }

/* Buttons the width of what they're in; the outlined ones a ground under the pointer */
.ms-signin .ms-btn { width: 100%; padding: 14px 18px; font-size: 16px; white-space: normal; text-align: center; }
.ms-signin .ms-btn--line:hover { filter: none; background: var(--ms-tint); }
.ms-signin .ms-btn svg { flex: none; }
.ms-signin .ms-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--sp-muted); font-size: 14px; }
.ms-or::before, .ms-or::after { content: ""; flex: 1; border-top: 1px solid var(--sp-line); }

/* The password, folded under its button (a <details>: it opens without JavaScript too) */
.ms-auth__pw > summary { list-style: none; }
.ms-auth__pw > summary::-webkit-details-marker { display: none; }
.ms-auth__pw > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.ms-auth__pw[open] > summary { background: var(--ms-tint); }
.ms-auth__pw[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.ms-auth__pw > form { padding: 18px 0 4px; }
.ms-auth__pw + .ms-btn { margin-top: 10px; }

/* The line at the end: no account, help */
.ms-signin .ms-auth__foot { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--sp-line); color: var(--sp-muted); font-size: 14px; }

/* Phones: the pages' card the screen's width, the surface above and below it */
@media (max-width: 520px) {
    .ms.ms-auth { padding: 16px 0 40px; }
    .ms-auth__card { max-width: none; padding: 26px 20px 22px; border-width: 1px 0; border-radius: 0; }
    .sp .ms-auth__card .ms-title { font-size: 30px; }
}