/* Writer site only. Fonts are the site's own files; nothing loads from outside. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-Bold.woff2") format("woff2"); }

body.role-writer, body.auth-body {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-family: var(--font);
}

/* ---- Sign-in: login card on the left (30%), picture on the right; the same gap everywhere ---- */
body.auth-body {
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #5a6170;
  --border: #cfd3dc;
  --accent: #1f4fd8;
  --btn-ink: #000000;
  --btn-on-ink: #a8ff39;
  --gap: 1rem;
  --radius: 24px;
  margin: 0;
  background: #ffffff;
  color: var(--fg);
  color-scheme: light;
}

.auth {
  display: grid;
  grid-template-columns: minmax(22rem, 3fr) minmax(0, 7fr);
  gap: var(--gap);
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right)) max(var(--gap), env(safe-area-inset-bottom)) max(var(--gap), env(safe-area-inset-left));
}

.auth-art {
  border-radius: var(--radius);
  background-color: #e9ecf3;
  background-image: url("/assets/login.jpg"), linear-gradient(135deg, #e9ecf3, #cfd6e6);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.auth-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e3e6ee;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
}

/* margin:auto centres the form when there is room and lets the card grow when the keyboard takes space */
.auth-box { width: 100%; max-width: 22rem; margin: auto; }

.auth-logo { display: block; height: 2.5rem; width: auto; max-width: 100%; margin: 0 0 2rem; }
.auth-box h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.25rem; }
.auth-sub { margin: 0 0 1.5rem; color: var(--muted); }

.auth .form label { font-weight: 500; font-size: 0.95rem; }
/* 16px minimum stops iPhone Safari from zooming the page when a field is focused */
.auth .form input {
  font-size: 1rem;
  line-height: 1.25;
  height: 3.5rem;
  min-height: 3.5rem;
  /* left inset = button inset (2px border + 24px padding), so text lines up in every field and the button */
  padding: 0 1rem 2px 25px; /* 2px bottom: Plus Jakarta Sans sits slightly low in a centred line, this lifts it to the visual centre */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--fg);
}
.auth .form input:focus { outline: 2px solid var(--btn-ink); outline-offset: 0; border-color: var(--btn-ink); }

.pw { position: relative; }
.pw input { padding-right: 3.75rem; padding-bottom: 4px; } /* the password dots sit lower than letters in this font */
.pw-toggle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 56px wide: the lock sits exactly above the button's icon square (28px from the right edge) */
  width: 3.5rem;
  margin: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.pw-toggle .icon { width: 22px; height: 22px; }
.pw-toggle:focus-visible { outline: 2px solid var(--btn-ink); outline-offset: -2px; }
.pw-toggle .ic-unlock { display: none; }
.pw-toggle[aria-pressed="true"] .ic-lock { display: none; }
.pw-toggle[aria-pressed="true"] .ic-unlock { display: block; }

.auth .btn--block { margin-top: 1.5rem; min-height: 3.5rem; }

/* Phones and small tablets: the picture is dropped and the form fills the screen */
@media (max-width: 52rem) {
  .auth { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .auth-art { display: none; }
  .auth-panel {
    border: 0;
    border-radius: 0;
    padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  }
  .auth-box { max-width: 24rem; }
}

@media (max-height: 34rem) {
  .auth-logo { margin-bottom: 1rem; height: 2rem; }
  .auth-sub { margin-bottom: 1rem; }
}