/* The sign-in pages (auth.{domain}) in slatefinance.de's look - the same as account.{domain} and group.{domain}
   (user-management's public/brand.css): slate, bronze and cream, Archivo with IBM Plex Mono for the small capitals,
   square corners and bronze hairlines, the faint grid behind. Light or dark as the device is set, like the pages a
   sign-in leads to. Served by authService.js (BRAND_FILES); the fonts are self-hosted, so no font service sees who
   signs in. */

@font-face { font-family: Archivo; font-style: normal; font-weight: 400; font-display: swap; src: url(/brand/fonts/archivo-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 500; font-display: swap; src: url(/brand/fonts/archivo-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Archivo; font-style: normal; font-weight: 600; font-display: swap; src: url(/brand/fonts/archivo-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/brand/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --schiefer: #282828;
  --schiefer-deep: #1f1f1f;
  /* auth.{domain}'s colour where slatefinance.de has bronze: the middle bar of its favicon (brand/favicon.svg), as
     account.{domain} and group.{domain} have theirs. -light and -lighter are it lifted for slate (dark mode). */
  --site-rgb: 86, 106, 128;
  --site: rgb(var(--site-rgb));
  --site-soft: rgba(var(--site-rgb), 0.45);
  --site-hair: rgba(var(--site-rgb), 0.28);
  --site-light: #869db6;
  --site-lighter: #9ab0c8;
  --creme: #f1eee9;
  --creme-deep: #e7e2da;
  --creme-soft: rgba(241, 238, 233, 0.66);
  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --bg: var(--creme-deep);
  --surface: var(--creme);
  --text: var(--schiefer);
  --text-soft: rgba(40, 40, 40, 0.72);
  --muted: rgba(40, 40, 40, 0.5);
  --border: var(--site-hair);
  --border-strong: var(--site-soft);
  --grid: rgba(var(--site-rgb), 0.1);
  --accent: var(--site);
  --primary-bg: var(--schiefer);
  --primary-text: var(--creme);
  --primary-hover: var(--site);
  --error: #a33a32;
  --error-border: rgba(163, 58, 50, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--schiefer-deep);
    --surface: var(--schiefer);
    --text: var(--creme);
    --text-soft: var(--creme-soft);
    --muted: rgba(241, 238, 233, 0.45);
    --border: rgba(241, 238, 233, 0.1);
    --border-strong: rgba(241, 238, 233, 0.2);
    --grid: rgba(241, 238, 233, 0.05);
    --accent: var(--site-light);
    --primary-bg: var(--creme);
    --primary-text: var(--schiefer);
    --primary-hover: var(--site-lighter);
    --error: #f08a80;
    --error-border: rgba(240, 138, 128, 0.4);
  }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-display);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--site); color: var(--creme); }

/* Masthead: the logo on slate with the site's name in small capitals, as on account and group. */
.masthead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: var(--schiefer);
  border-bottom: 1px solid var(--site-hair);
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(241, 238, 233, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(241, 238, 233, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
}
.masthead__brand { position: relative; display: inline-flex; }
.masthead__brand svg { height: 1.4rem !important; width: auto; display: block; }
.masthead__label {
  position: relative;
  padding-left: 1.25rem;
  border-left: 1px solid var(--site-hair);
  color: var(--site-light);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* The page's one panel, in the middle. */
.main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 4rem);
}
.card {
  width: 100%;
  max-width: 28rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
}
.card__kicker,
.card__code {
  margin-bottom: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__heading {
  margin-bottom: 0.8rem;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.card__sub {
  margin-bottom: 2rem;
  color: var(--text-soft);
  line-height: 1.6;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}

/* Fields: square, a hairline, bronze when in use; the labels in small capitals. */
.form { display: flex; flex-direction: column; gap: 0.85rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 30rem) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.field__label--optional::after { content: " —"; color: var(--muted); }
.field__hint { margin-top: 0.1rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--muted); }
.field__input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field__input::placeholder { color: var(--muted); }
.field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
}

/* Buttons: square; the main one solid slate (cream in dark), turning bronze; the second one outlined. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-text);
  background: var(--primary-bg);
  border: 1px solid var(--primary-bg);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
a.btn { display: inline-flex; width: auto; padding-inline: 1.4rem; }
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--creme); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn__arrow { font-size: 1.1rem; line-height: 1; }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: transparent; color: var(--text); border-color: var(--accent); }
.links { display: flex; flex-direction: column; gap: 0.75rem; }
.links .btn { width: 100%; }

/* Messages under the form. */
.msg {
  display: none;
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
}
.msg.is-visible { display: block; }
.msg--error { border: 1px solid var(--error-border); border-left-width: 3px; color: var(--error); }
.msg--success { border: 1px solid var(--border); border-left: 3px solid var(--accent); color: var(--text-soft); }

.alt {
  margin-top: 1.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.alt a:hover { color: var(--text); }
.rule,
.divider { border: 0; border-top: 1px solid var(--border); }
.rule { margin: 2rem 0 0; }
.divider { margin: 0.5rem 0; }

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(1.2rem, 2vw, 1.8rem) clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}
.footer__mono {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}