/* The sign-in pages: Django templates outside the React build, drawn with the panel's tokens. */

/* Inter, SIL Open Font License 1.1. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("inter-latin-wght-normal.260c81a4759b.woff2") format("woff2-variations");
}

:root {
  --page: #1b1b1b;
  --canvas-ink: #f2f2f2;
  --ink: #1c2b33;
  --ink-2: #465a69;
  --ink-3: #5c6873;
  --primary: #0074b9;
  --primary-hover: #0063a6;
  --field: rgb(0 94 188 / 8.5%);
  --field-hover: rgb(0 94 188 / 12.5%);
  --field-edge: inset 0 0 0 1px rgb(0 62 124 / 7%), inset 0 1px 2px rgb(0 40 80 / 7%);
  --field-ring: 0 0 0 1px var(--primary), 0 0 0 4px rgb(0 116 185 / 15%);
  --divider: #edf0f4;
  --red-bg: #ffeef1;
  --red-line: #ffcdd5;
  --red-ink: #993443;
  --green-bg: #e5faf1;
  --green-line: #b7ead3;
  --green-ink: #016b4e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 14px/1.45 "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgb(0 116 185 / 24%); }

/* High on a phone so the keyboard leaves the button in view, centred once there is room. */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 100dvh;
  padding: clamp(32px, 9dvh, 96px) 16px 32px;
}
@media (min-width: 640px) and (min-height: 620px) {
  .stage { justify-content: center; padding-top: 32px; }
}

.brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.mark {
  display: block;
  width: 96px;
  height: 76px;
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px -10px rgb(0 0 0 / 65%);
}
.mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.name { color: var(--canvas-ink); font-size: 24px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; text-wrap: balance; }

.card {
  width: 100%;
  max-width: 384px;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px -18px rgb(0 0 0 / 75%);
}
.card h1 { margin: 0 0 16px; font-size: 18px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.card > p { margin: 0 0 20px; color: var(--ink-2); }

.alert {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--red-line);
  border-radius: 8px;
  background: var(--red-bg);
  color: var(--red-ink);
  font-size: 13px;
  font-weight: 500;
}
.alert.done { border-color: var(--green-line); background: var(--green-bg); color: var(--green-ink); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
.field label { font-size: 13px; font-weight: 500; }
.field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--field);
  box-shadow: var(--field-edge);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
  outline: none;
  transition: background-color 150ms, box-shadow 150ms;
}
.field input:hover { background: var(--field-hover); }
.field input:focus { background: #fff; box-shadow: var(--field-ring); }
.field-error { margin: 0; color: var(--red-ink); font-size: 12px; font-weight: 500; }
.help { color: var(--ink-3); font-size: 12px; }
.help ul { margin: 0; padding-left: 16px; }
.help li + li { margin-top: 2px; }

.secret { position: relative; }
.secret input { padding-right: 46px; }
.reveal {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 150ms;
}
.reveal:hover { color: var(--primary); }
.reveal:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.reveal svg { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reveal .when-shown, .reveal[aria-pressed="true"] .when-hidden { display: none; }
.reveal[aria-pressed="true"] .when-shown { display: block; }

.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 20px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  box-shadow: 0 1px 2px rgb(0 85 139 / 25%);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms;
}
.submit:hover { background: var(--primary-hover); }
.submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.submit:disabled { opacity: 0.72; cursor: progress; }

.back {
  display: block;
  margin-top: 14px;
  padding: 6px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
.back:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes rise { from { opacity: 0.55; transform: translateY(10px); } }
}