/* The intranet's look, transcribed from hd-data-cr-services-intranet-web's
   globals.css so the sign-in page reads as the front door of the same product.
   Values are the Hunter Douglas Brand Guidelines 2026 colours plus the intranet's
   own derived tokens (border, muted, ground). Univers Next Pro is a licensed face
   that is not copied into this repo, so body type uses the intranet's fallback
   tail; the wordmark is an outlined path in index.html and needs no font. */
:root {
  --hd-orange: #F08200;
  --hd-ink: #141212;
  --hd-paper: #FFFFFF;
  --hd-ground: #FAF9F7;
  --hd-border: color-mix(in oklab, var(--hd-ink) 13%, var(--hd-paper));
  --hd-field-border: color-mix(in oklab, var(--hd-ink) 45%, var(--hd-paper));
  --hd-muted: color-mix(in oklab, var(--hd-ink) 67%, var(--hd-paper));
  --hd-primary-text: color-mix(in oklab, var(--hd-orange) 60%, var(--hd-ink));
  --hd-orange-hover: color-mix(in oklab, var(--hd-orange) 88%, var(--hd-ink));
  --hd-radius-control: 10px;
  --hd-radius-card: 4px;
  --hd-shadow-card: 0 1px 2px rgb(0 0 0 / 0.05);
  --font: "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font);
  color: var(--hd-ink);
  background: var(--hd-ground);
  -webkit-font-smoothing: antialiased;
}

/* Author `display` rules below would otherwise override the hidden attribute
   that client.js toggles to switch between the SSO, email and code steps. */
[hidden] { display: none !important; }

body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; }
body[data-busy="true"] { cursor: progress; }

.suite-bar {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: var(--hd-paper);
  border-bottom: 1px solid var(--hd-border);
}
.brand { display: grid; gap: 5px; min-width: 0; }
/* 23px type at the intranet's desktop size: 95.1 viewBox units at 0.23px each. */
.wordmark { display: block; width: 194px; height: auto; color: var(--hd-orange); }
.tagline {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--hd-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The full-bleed backdrop below the bar, the way hunterdouglasgroup.com puts a
   photograph under its white header. The ground colour shows until it loads. */
.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 48px 16px;
  background: var(--hd-ground) url("/backdrop.svg?v=backdrop-1") center / cover no-repeat;
}
.card {
  box-sizing: border-box;
  width: min(440px, 100%);
  padding: 32px;
  background: var(--hd-paper);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-card);
  box-shadow: var(--hd-shadow-card), 0 12px 32px rgb(80 74 65 / 0.18);
}
.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hd-primary-text);
}
h1 { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.2; }
.lede { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--hd-muted); }

form, section { display: grid; gap: 12px; margin-top: 24px; }
label { font-size: 14px; font-weight: 500; }
input, button {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--hd-radius-control);
  font: inherit;
  font-size: 15px;
}
input { border: 1px solid var(--hd-field-border); background: var(--hd-paper); color: var(--hd-ink); }
input:focus-visible, button:focus-visible { outline: 2px solid var(--hd-ink); outline-offset: 2px; }
button {
  border: 1px solid var(--hd-orange);
  color: var(--hd-ink);
  background: var(--hd-orange);
  cursor: pointer;
  font-weight: 500;
}
button:hover:not(:disabled) { background: var(--hd-orange-hover); border-color: var(--hd-orange-hover); }
button.secondary { background: var(--hd-paper); border-color: var(--hd-ink); }
button.secondary:hover:not(:disabled) { background: var(--hd-ground); border-color: var(--hd-ink); }
button:disabled { cursor: not-allowed; opacity: .6; }
button[data-loading="true"] { cursor: wait; opacity: 1; }
button[data-loading="true"]::before {
  content: '';
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spinner .7s linear infinite;
  vertical-align: -.08em;
}
#status { margin: 16px 0 0; font-size: 14px; line-height: 1.4; color: var(--hd-muted); }
#status:empty { display: none; }
#status[data-error="true"] {
  color: #9b2c1d;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid #f08200;
  border-radius: var(--hd-radius-card);
  padding: 10px 12px;
  font-weight: 500;
  line-height: 1.4;
}
@keyframes button-spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button[data-loading="true"]::before { animation: none; }
}

/* The intranet steps its wordmark down to 17px on narrow screens. */
@media (max-width: 640px) {
  .suite-bar { padding: 0 16px; }
  .wordmark { width: 144px; }
  .stage { padding: 24px 16px; place-items: start center; }
  .card { padding: 24px 20px; }
  h1 { font-size: 28px; }
}