/* ═══════════════════════════════════════════════════════════════════════════
   auth.qivity.com — the sign-in page.

   Deliberately NOT the application's stylesheet. This page belongs to the
   issuer, not to any one product: it is shown to CRM customers, Account
   Management customers and whoever is registered next, so borrowing one
   product's visual language would make it look like that product's login page
   in front of everybody else. It is a short, neutral interstitial — a single
   centred card, no marketing panel, nothing to read.

   Tokens are defined once on :root for light and overridden in one
   prefers-color-scheme block. No colour is defined ONLY inside the media
   query, so a browser that reports neither still renders a complete palette.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #f4f5f7;
  --bg-glow-1: rgba( 79, 108, 255, .16);
  --bg-glow-2: rgba( 16, 185, 166, .13);
  --surface:   #ffffff;
  --border:    #e3e6ec;
  --border-strong: #d2d7e0;
  --text:      #16181d;
  --text-dim:  #5d6470;
  --text-faint:#868d99;
  --accent:    #3d5afe;
  --accent-ink:#ffffff;
  --accent-soft: rgba( 61,  90, 254, .10);
  --danger:    #c02626;
  --danger-bg: rgba(192,  38,  38, .08);
  --field:     #ffffff;
  --field-bg-2:#f7f8fa;
  --shadow:    0 1px 2px rgba(16,18,24,.05), 0 12px 32px -8px rgba(16,18,24,.14);
  --radius:    14px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d0f13;
    --bg-glow-1: rgba( 79, 108, 255, .20);
    --bg-glow-2: rgba( 16, 185, 166, .14);
    --surface:   #16191f;
    --border:    #272c35;
    --border-strong: #363d49;
    --text:      #eceef2;
    --text-dim:  #9aa2b1;
    --text-faint:#6f7787;
    --accent:    #6b83ff;
    --accent-ink:#0d0f13;
    --accent-soft: rgba(107, 131, 255, .14);
    --danger:    #ff8787;
    --danger-bg: rgba(255, 135, 135, .10);
    --field:     #1b1f26;
    --field-bg-2:#20252d;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 16px 40px -10px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Two soft lights behind the card. Fixed and pointer-events-free so they never
   interfere with the form; painted on ::before/::after rather than as elements
   because they are decoration and should not exist in the accessibility tree. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
body::before { top: -18rem; left: -14rem; background: var(--bg-glow-1); }
body::after  { bottom: -20rem; right: -12rem; background: var(--bg-glow-2); }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.noscript {
  position: relative;
  z-index: 2;
  margin: 24px auto;
  max-width: 26rem;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13.5px;
}

/* ── layout ──────────────────────────────────────────────────────────────── */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* Safe-area padding so the card is not under a notch on a phone. */
  padding: max(24px, env(safe-area-inset-top)) 20px
           max(24px, env(safe-area-inset-bottom));
}

.card {
  width: 100%;
  max-width: 25rem;
  padding: 30px 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* While /signin is in flight there is nothing truthful to show: which step
   comes first depends on its answer. Hiding the body of the card avoids a
   flash of the email step for a visitor who is already past it. */
.card[aria-busy="true"] > *:not(.card-head) { visibility: hidden; }

.card-head { margin-bottom: 22px; }

.mark {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.mark svg { width: 20px; height: 20px; display: block; }
.mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.title {
  margin: 0;
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -.012em;
}

.subtitle {
  margin: 5px 0 0;
  min-height: 1.35em;      /* reserved, so filling it does not shift the card */
  color: var(--text-dim);
  font-size: 13.5px;
}

.stage-foot {
  position: relative;
  z-index: 1;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: .02em;
}

/* ── steps ───────────────────────────────────────────────────────────────── */

.step { display: flex; flex-direction: column; gap: 10px; }
.step[hidden] { display: none; }
.step-center {
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 18px 0 10px;
}

.label {
  font-size: 12.5px;
  font-weight: 560;
  color: var(--text-dim);
}

.input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .12s, box-shadow .12s;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input[aria-invalid="true"] { border-color: var(--danger); }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 560;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }

.btn-primary {
  margin-top: 4px;
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }

.btn-provider {
  background: var(--field-bg-2);
  border-color: var(--border-strong);
  color: var(--text);
  justify-content: flex-start;
}
.btn-provider:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
/* Provider marks keep their own brand colours, so they are never recoloured to
   the text colour the way an interface icon would be. */
.btn-provider svg { width: 18px; height: 18px; flex: 0 0 18px; }

.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.providers { display: flex; flex-direction: column; gap: 9px; }

/* ── the address, on step two ────────────────────────────────────────────── */

.identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--field-bg-2);
  font-size: 13px;
}
.identity-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}

/* ── misc ────────────────────────────────────────────────────────────────── */

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--text-faint);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.divider[hidden] { display: none; }
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.password-block { display: flex; flex-direction: column; gap: 10px; }
.password-block[hidden] { display: none; }

.notice {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 13px;
}
.notice[hidden] { display: none; }

.muted { margin: 0; color: var(--text-dim); font-size: 13px; }
.muted[hidden] { display: none; }

.spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A button that is working keeps its label and gains a small spinner, rather
   than swapping the label for "Please wait" — the width stays put and the
   button does not resize under the pointer mid-click. */
.btn .btn-spin {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@media (max-width: 30rem) {
  .card { padding: 26px 20px 22px; border-radius: 12px; }
  .title { font-size: 19.5px; }
}

/* ── tabs: sign in / new organization ────────────────────────────────────── */
/* Hidden in the markup and revealed only once the server says a product here
   can actually provision an organization. A tab leading to "not supported" is
   worse than no tab. */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--field-bg-2);
}
.tabs[hidden] { display: none; }

.tab {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tab:hover { color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 18, 24, .08);
}

/* ── the terms ───────────────────────────────────────────────────────────── */

.terms { display: flex; flex-direction: column; gap: 10px; }

.terms-body {
  max-height: 9.5rem;
  overflow-y: auto;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--field-bg-2);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
  /* The text arrives as plain text and is written with textContent, so its own
     line breaks are all the structure it has. Without this it collapses into
     one paragraph and becomes unreadable. */
  white-space: pre-wrap;
}
.terms-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.terms-body:empty { display: none; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
}
.check input {
  /* 2px down: a checkbox baseline-aligned to a 13px line sits visibly high
     against the first line of the label. */
  margin: 2px 0 0;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 15px;
}

.small { font-size: 12px; }

/* The way back to a product, for an organization this page cannot sign in.
   An anchor rather than a button, because it is a navigation to another
   origin — so it needs the link decoration removed to match the buttons
   beside it. */
a.btn { text-decoration: none; }