/* The sign-in form and the account page. Plain and self-contained: they are
   shown before a skin is known, and to people on every kind of screen. */
:root { color-scheme: light; }
html, body { margin: 0; min-height: 100%; }
body {
    font: 15px/1.5 "Segoe UI", Arial, sans-serif;
    color: #1d2327;
    background: #e9edf0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 2rem;
    box-sizing: border-box;
}

.card {
    background: #fff;
    border: 1px solid #cfd6db;
    border-radius: 6px;
    padding: 1.8rem 2rem 2rem;
    width: 100%;
    max-width: 22rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.brand { display: block; height: 2.2rem; margin: 0 0 .9rem; }

/* The sign-in form puts the mark beside the name, and plays it: see login.js. */
.brand-row { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; }
.brand-row .brand { margin: 0; }
.mark { flex: none; width: 3.4rem; height: 3.4rem; }
.mark svg, .mark img { display: block; width: 100%; height: 100%; }
h1 { font-size: 1.4rem; margin: .2rem 0 1.2rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }

label { display: block; font-size: .85rem; color: #45535c; margin: .8rem 0 .25rem; }
input {
    font: inherit;
    width: 100%;
    box-sizing: border-box;
    padding: .45rem .6rem;
    border: 1px solid #b9c3c9;
    border-radius: 4px;
    background: #fff;
}
input:focus { outline: 2px solid #2f6f9f; outline-offset: 0; border-color: #2f6f9f; }

button {
    font: inherit;
    margin-top: 1.2rem;
    padding: .5rem 1.2rem;
    border: 1px solid #2f6f9f;
    border-radius: 4px;
    background: #2f6f9f;
    color: #fff;
    cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }
button.secondary { background: #fff; color: #2f6f9f; }

.message { min-height: 1.4em; margin: .8rem 0 0; color: #b03030; }
.message.ok { color: #2d7a3a; }
.who { color: #45535c; margin: 0; }
.notice { background: #fff7e0; border-left: 4px solid #c79a00; padding: .5rem .7rem; margin: 0 0 1rem; }
.links { margin-top: 1.4rem; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.links a { color: #2f6f9f; }