/* Sign-in page.
 *
 * Deliberately standalone rather than sharing styles.css. The dashboard stylesheet is
 * ~1,900 lines describing tables, heat grids and sparklines, none of which exist here,
 * and it is served to authenticated users only - a login page has to be readable by
 * anyone who can reach the URL, so the less it pulls in, the smaller the surface.
 * The tokens below are copied from styles.css so the two still look like one product.
 */

:root {
  --font-sans: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Poppins, var(--font-sans);

  --violet-100: #e8e5fd;
  --violet-200: #d3cdfb;
  --violet-400: #9a8ff5;
  --violet-500: #786af1;
  --violet-600: #6354e4;
  --violet-700: #554ac1;

  --bg: #f6f5fe;
  --card: #ffffff;
  --text: #1c1830;
  --text-soft: #4a4463;
  --text-faint: #6b6486;
  --line: #e4e1f4;
  --border-strong: #cfcae8;
  --brand: var(--violet-500);
  --brand-ink: var(--violet-700);
  --bad-ink: #a3232f;
  --bad-soft: #fdeaec;
  --bad-line: #f5c6cb;

  --r-md: 8px;
  --r-lg: 12px;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --shadow: 0 1px 2px rgb(42 36 97 / 0.05), 0 18px 40px -22px rgb(42 36 97 / 0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0b16;
    --card: #191527;
    --text: #eceafa;
    --text-soft: #b6b0d4;
    --text-faint: #8f88ad;
    --line: #2a2440;
    --border-strong: #3a3358;
    --brand: var(--violet-400);
    --brand-ink: var(--violet-400);
    --bad-ink: #ff9ba4;
    --bad-soft: rgb(190 40 55 / 0.16);
    --bad-line: rgb(190 40 55 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 40px -20px rgb(0 0 0 / 0.7);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text);
  /* A wash of brand colour behind the card, so the page reads as Oppify's before
     anyone has typed anything. */
  background:
    radial-gradient(1100px 620px at 50% -10%, rgb(120 106 241 / 0.16), transparent 70%),
    var(--bg);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.signin { width: 100%; max-width: 380px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
  text-align: center;
}

.lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: var(--sp-5);
}
.logo { height: 30px; width: auto; }
/* If the logo cannot load - offline, or oppify.io unreachable - the wordmark takes
   over rather than leaving a broken-image icon as the first thing anyone sees. */
.logo.is-missing { display: none; }
.logo.is-missing + .logo-fallback { display: inline; }
.logo-fallback {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

h1 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
}

.lede {
  margin: 0 0 var(--sp-5);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.error {
  display: flex;
  gap: var(--sp-2);
  text-align: left;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bad-soft);
  border: 1px solid var(--bad-line);
  color: var(--bad-ink);
  font-size: 0.8125rem;
}

form { display: grid; gap: var(--sp-4); text-align: left; }

label { display: grid; gap: 6px; }
label span {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

input {
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  width: 100%;
  transition: border-color 120ms, box-shadow 120ms;
}
input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(120 106 241 / 0.22);
}

.submit {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--violet-600);
  border: 1px solid var(--violet-600);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  cursor: pointer;
  margin-top: var(--sp-2);
  transition: background 120ms;
}
.submit:hover { background: var(--violet-700); border-color: var(--violet-700); }
.submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.note {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  color: var(--text-faint);
}

/* Dark-mode form controls need the hint or the browser paints its own light chrome. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* Neutral counterpart to .error - an expired session is not a failed attempt, and
   colouring it red trains people to ignore red. */
.notice {
  display: flex;
  gap: var(--sp-2);
  text-align: left;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--violet-100);
  border: 1px solid var(--violet-200);
  color: var(--violet-700);
  font-size: 0.8125rem;
}
@media (prefers-color-scheme: dark) {
  .notice {
    background: rgb(120 106 241 / 0.16);
    border-color: rgb(154 143 245 / 0.4);
    color: var(--violet-400);
  }
}