/* Anmeldeseite: eine einzelne Karte auf ruhigem Grund. */

.login-page {
  background: var(--paper);
}

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login__card {
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.login__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 4px;
}

.login__mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: currentColor;
  color: var(--accent);
  -webkit-mask: var(--mark-svg) center / contain no-repeat;
  mask: var(--mark-svg) center / contain no-repeat;
  --mark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Zm-6 13a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Zm12 0a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2ZM11 8.6h2v3.1h5.2v4.2h-2v-2.2H6.8v2.2h-2v-4.2H11V8.6Z'/%3E%3C/svg%3E");
}

.login__brand h1 {
  font-size: 19px;
}

.login__brand p {
  color: var(--ink-muted);
  font-size: 12.5px;
}

.login__submit {
  margin-top: 4px;
  min-height: 34px;
}

.login__card .dialog__error {
  margin: 0;
}

.download-card { width: min(560px, 100%); }
.download-card ol { padding-left: 20px; }
.download-card li + li { margin-top: 8px; }
.download-hint { color: var(--ink-muted); font-size: 12px; }
#installer-download[hidden] { display: none; }