/* An invite's pages and the door's sign-in (routes_invites.py): big, plain and high in contrast, for every browser
   from an older Edge or Firefox ESR on Windows 10 on; nothing here needs a script. */
html {
  font-size: 18px;
}
body {
  margin: 0;
  padding: 24px 16px;
  background: #ffffff;
  color: #111111;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.5;
}
.join {
  display: block;
  max-width: 34em;
  margin: 0 auto;
}
h1 {
  margin: 0 0 16px;
  font-size: 1.8em;
  font-weight: bold;
}
.lead {
  margin: 0 0 16px;
  font-size: 1.1em;
}
.login {
  padding: 12px;
  background: #eef4fb;
  border: 2px solid #0b5cad;
}
.message {
  margin: 0 0 12px;
  min-height: 1.2em;
  color: #a40000;
  font-weight: bold;
}
label {
  display: block;
  margin: 16px 0 4px;
  font-weight: bold;
}
input[type="text"], input[type="password"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  font: inherit;
  font-size: 1.1em;
  border: 2px solid #555555;
  background: #ffffff;
  color: #111111;
}
input:focus, a:focus, button:focus {
  outline: 3px solid #0b5cad;
  outline-offset: 2px;
}
fieldset {
  margin: 20px 0 0;
  padding: 8px 12px 12px;
  border: 2px solid #cccccc;
}
fieldset[hidden], [hidden] {
  display: none;
}
legend {
  padding: 0 4px;
  font-weight: bold;
}
label.choice {
  display: block;
  margin: 10px 0 0;
  font-weight: normal;
  cursor: pointer;
}
label.choice input {
  width: 22px;
  height: 22px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.hint {
  margin: 4px 0 8px;
  color: #444444;
  font-size: 0.95em;
}
.show button {
  padding: 6px 12px;
  font: inherit;
  font-size: 0.95em;
  border: 2px solid #555555;
  background: #f3f3f3;
  color: #111111;
  cursor: pointer;
}
.big {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 8px;
  padding: 16px;
  border: 0;
  background: #0b5cad;
  color: #ffffff;
  font: inherit;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.big:hover {
  background: #084a8c;
}
a {
  color: #0b5cad;
}
@media (prefers-color-scheme: dark) {
  body { background: #111111; color: #f2f2f2; }
  input[type="text"], input[type="password"] { background: #1b1b1b; color: #f2f2f2; border-color: #aaaaaa; }
  .login { background: #10243a; border-color: #6fb0f0; }
  .hint { color: #cccccc; }
  .message { color: #ff8a8a; }
  fieldset { border-color: #555555; }
  .show button { background: #2a2a2a; color: #f2f2f2; border-color: #aaaaaa; }
  a { color: #8cc4ff; }
}