/*
 * BC NDP single sign-on styles.
 * Light theme only: sign-in is a brief task step, and the official logo's
 * colours on a dark surface are unconfirmed.
 *
 * Contrast (WCAG 2.x, verified):
 *   ink on surface          #1f2328 / #ffffff   15.8:1
 *   ink-muted on surface    #5b6169 / #ffffff    6.25:1
 *   ink-muted on canvas     #5b6169 / #f6f5f3    5.74:1
 *   primary button: white on the bcndp.ca gradient #ff6633 -> #ff8f1c is
 *   2.92:1 -> 2.28:1. Below AA (4.5:1); chosen to match bcndp.ca exactly.
 *   link on surface         #a8401d / #ffffff    6.15:1  (also focus ring)
 *   control border          #8a8f98 / #ffffff    3.25:1  (WCAG 1.4.11)
 *   error text on error bg  #9b2a1c / #fdf1ef    6.93:1
 */
/*
 * Lato, self-hosted (SIL OFL, see fonts/OFL.txt). The dashboards use it via
 * Bootswatch Flatly, so signing in and landing on a dashboard read as one product.
 * Only regular and bold exist, so every emphasis role is 700.
 */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;

  --orange: #e95e30;          /* BC NDP orange, sampled from the official 2023 logo PNG */
  --orange-ink: #a8401d;      /* same hue, dark enough for text and focus on white */
  --orange-wash: #fbdccf;     /* text selection */

  /* bcndp.ca call-to-action gradient (site.css .header-cta / .form-button) */
  --cta-gradient: linear-gradient(to right, #ff6633 1%, #ff8f1c 100%);
  --cta-start: #ff6633;

  --canvas: #f6f5f3;
  --surface: #ffffff;
  --ink: #1f2328;
  --ink-muted: #5b6169;
  --control-border: #8a8f98;
  --hairline: #e6e3de;

  --error-ink: #9b2a1c;
  --error-wash: #fdf1ef;
  --error-line: #f1c4bd;

  --warn-ink: #7a4500;        /* 7.3:1 on warn-wash */
  --warn-wash: #fff6e5;
  --warn-line: #f2d39b;

  --radius: 6px;
  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type roles */
  --text-title: 1.5rem;      /* h1 */
  --text-body: 1rem;         /* body, inputs, buttons, lede */
  --text-label: 0.9375rem;   /* form labels, alerts */
  --text-meta: 0.875rem;     /* hints, summary keys, toggle */
  --bold: 700;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
  caret-color: var(--orange-ink);
  accent-color: var(--orange);
}

::selection { background: var(--orange-wash); color: var(--ink); }

/* Brand band across the top of every page. */
.brand-band { height: 4px; background: var(--orange); }

.page {
  display: flex;
  justify-content: center;
  padding: clamp(2rem, 14vh, 9rem) 1rem 3rem;
}

.card {
  width: 100%;
  max-width: 27rem;          /* lede fits one line; fields keep a comfortable measure */
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(31 35 40 / 0.04), 0 8px 24px -12px rgb(31 35 40 / 0.12);
  padding: 2rem;
}

.logo { display: block; height: 2.5rem; width: auto; margin-bottom: 1.5rem; }

h1 {
  margin: 0 0 0.375rem;
  font-size: var(--text-title);
  line-height: 1.25;
  font-weight: var(--bold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede { margin: 0 0 1.5rem; color: var(--ink-muted); font-size: var(--text-body); text-wrap: pretty; }

.alert {
  margin: 0 0 1rem;           /* closer to the form it belongs to than to the lede */
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--error-line);
  border-radius: var(--radius);
  background: var(--error-wash);
  color: var(--error-ink);
  font-size: var(--text-label);
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.alert svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; }

.field { margin-bottom: 1rem; }

label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--text-label);
  font-weight: var(--bold);
}

input[type="text"], input[type="password"] {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  font: inherit;            /* 16px: stops iOS zooming on focus */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  transition: border-color 150ms ease-out;
}
input:hover { border-color: var(--ink-muted); }
input[aria-invalid="true"] { border-color: var(--error-ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.875rem;
  padding: 0 1.5rem;
  font: inherit;
  font-weight: var(--bold);
  text-decoration: none;
  border-radius: 999px;          /* pill, as on bcndp.ca */
  cursor: pointer;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}

/* Primary: the bcndp.ca call-to-action. White, uppercase, tracked, on the orange gradient. */
.btn-primary {
  width: 100%;
  border: 0;
  background-color: var(--cta-start);
  background-image: var(--cta-gradient);
  color: #ffffff;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
form .btn-primary { margin-top: 0.5rem; }
/* Darken with an inset wash so the gradient itself stays intact. */
.btn-primary:hover { box-shadow: inset 0 0 0 999px rgb(0 0 0 / 0.06); }
.btn-primary:active { box-shadow: inset 0 0 0 999px rgb(0 0 0 / 0.12); }
.btn-primary:disabled { cursor: progress; box-shadow: none; opacity: 0.75; }

.btn-secondary {
  border: 1px solid var(--control-border);
  background: var(--surface);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--canvas); }

a { color: var(--orange-ink); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* One focus treatment for every control: a dark orange ring clear of the edge. */
:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 2px;
}
input:focus-visible { outline-offset: 1px; border-color: var(--orange-ink); }


/* Signed-in summary: a compact key/value table. */
.summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;      /* small keys share a baseline with their values */
  column-gap: 1rem;
  row-gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.summary dt {
  font-size: var(--text-meta);
  font-weight: var(--bold);
  color: var(--ink-muted);
}
.summary dd { margin: 0; }
.summary ul { margin: 0; padding: 0; list-style: none; }
.summary li + li { margin-top: 0.125rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.actions .btn, .actions form { flex: 1 1 auto; }
.actions form { display: flex; }
.actions form .btn { width: 100%; margin: 0; }

@media (max-width: 30rem) {
  body { background: var(--surface); }
  .page { padding: 0; }
  .card { border: 0; box-shadow: none; padding: 1.5rem 1rem; border-radius: 0; background: transparent; }
  .logo { margin-bottom: 1.25rem; }
}

@media (max-width: 20rem) {
  .summary { grid-template-columns: 1fr; row-gap: 0.25rem; }
  .summary dd + dt { margin-top: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Hardening ---------------------------------------------------------- */

/* Long usernames, riding names and error text wrap instead of overflowing. */
.card, .alert > div, .summary dd { overflow-wrap: anywhere; min-width: 0; }
.muted { color: var(--ink-muted); }

/* Show/hide password toggle, revealed only when sso.js runs. */
.password-wrap { position: relative; }
.has-password-toggle #password { padding-inline-end: 4.25rem; }
.password-toggle {
  position: absolute;
  inset-block: 1px;
  inset-inline-end: 1px;
  min-width: 4rem;
  padding: 0 0.625rem;
  font: inherit;
  font-size: var(--text-meta);
  font-weight: var(--bold);
  color: var(--orange-ink);
  background: transparent;
  border: 0;
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
  cursor: pointer;
}
.password-toggle:hover { background: var(--canvas); }
.password-toggle[hidden] { display: none; }

.field-hint { margin: 0.375rem 0 0; font-size: var(--text-meta); color: var(--ink-muted); }
.field-hint[hidden] { display: none; }

/* Submitting: the label says "Signing in…"; a progress cursor backs it up. */
form[data-submitting] .btn-primary { cursor: progress; }

/* Windows High Contrast / forced colours: keep boundaries and focus visible. */
@media (forced-colors: active) {
  .brand-band { background: CanvasText; }
  .btn, input, .alert, .card { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
}

/* Multi-paragraph alerts: tight paragraphs. */
.alert p { margin: 0; }
.alert p + p { margin-top: 0.375rem; }
.alert strong { font-weight: var(--bold); }
.alert a { color: inherit; text-decoration-thickness: 1px; }

/* Warning: something the person can fix with help, not a failed action. */
.alert-warning { border-color: var(--warn-line); background: var(--warn-wash); color: var(--warn-ink); }

/* A quiet secondary link under a page's main action (Cancel, Back to sign in). */
.aside { margin: 1.25rem 0 0; font-size: var(--text-label); text-align: center; }