/* KOVA · Authentication surface styles
   --------------------------------------------------------------
   The auth shell is a centered card on an otherwise empty page.
   No rail, no top bar — these surfaces precede tenant context.
   Architecture v7 §4.3: /session is bootstrap, not password login.
   Password login below has been added at product owner's request.
   -------------------------------------------------------------- */

/* ============================================================
   AUTH SHELL — full-bleed background with centered stage
   ============================================================ */
.k-auth {
  position: absolute; inset: 0;
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: auto;
}
.k-auth-stage {
  display: grid;
  place-items: center;
  padding: 48px 24px;
}
.k-auth-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-meta);
  color: var(--mute);
  background: var(--bg);
}
.k-auth-foot-links { display: flex; gap: 16px; }
.k-auth-foot-links a { color: var(--mute); text-decoration: none; }
.k-auth-foot-links a:hover { color: var(--ink); }
.k-auth-foot-key {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* ============================================================
   AUTH CARD — the focal surface
   ============================================================ */
.k-auth-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 36px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--z-2);
}
.k-auth-card.is-wide { max-width: 480px; }

.k-auth-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.k-auth-brand-mark {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--w-bold);
  font-size: 16px;
  letter-spacing: -0.02em;
}
.k-auth-brand-name {
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.k-auth-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.k-auth-sub {
  font-size: var(--t-body-sm);
  color: var(--mute);
  margin-top: 6px;
}

.k-auth-tenant-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-meta);
  color: var(--ink-2);
}
.k-auth-tenant-chip .l { color: var(--mute); }

/* Section separator with "or" */
.k-auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  font-size: var(--t-meta);
  color: var(--mute-2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: var(--w-semibold);
}
.k-auth-or::before, .k-auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ============================================================
   PROVIDER BUTTON — full-width, branded
   ============================================================ */
.k-provider {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--m-1) var(--ease-out),
              border-color var(--m-1) var(--ease-out);
}
.k-provider + .k-provider { margin-top: 10px; }
.k-provider:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.k-provider:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,91,255,0.12);
}
.k-provider[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.k-provider-mark {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-weight: var(--w-bold);
  font-size: 12px;
  flex-shrink: 0;
  color: #fff;
}
.k-provider-mark.is-google     { background: #1a73e8; }
.k-provider-mark.is-microsoft  {
  background:
    linear-gradient(to bottom right,
      #4b5563 0%, #4b5563 50%,
      transparent 50%, transparent 100%),
    linear-gradient(to bottom left,
      transparent 0%, transparent 50%,
      #4b5563 50%, #4b5563 100%);
  background-color: var(--ink-3);
}
.k-provider-mark.is-sso        { background: var(--ink); }
.k-provider-mark.is-email      { background: var(--ink-3); }
.k-provider-label { flex: 1; text-align: left; }
.k-provider-meta {
  font-size: var(--t-meta);
  color: var(--mute);
  font-weight: var(--w-regular);
}

/* ============================================================
   EMAIL/PASSWORD FORM
   ============================================================ */
.k-auth-form {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 4px;
}
.k-auth-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-meta);
}
.k-auth-row a { color: var(--accent); text-decoration: none; font-weight: var(--w-medium); }
.k-auth-row a:hover { text-decoration: underline; }

/* Security note */
.k-auth-security {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-meta);
  color: var(--mute);
}
.k-auth-security-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}

/* ============================================================
   BOOTSTRAP / SESSION STATES (architecture §4.3)
   ============================================================ */
.k-auth-stage-state {
  display: grid; place-items: center;
  text-align: center;
  padding: 24px 8px;
}
.k-auth-stage-mark {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--w-bold);
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.k-auth-state-text {
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  color: var(--ink);
  margin-top: 8px;
}
.k-auth-state-sub {
  font-size: var(--t-body-sm);
  color: var(--mute);
  margin-top: 6px;
  max-width: 36ch;
  line-height: 1.5;
}

/* Bootstrap step list */
.k-auth-steps {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
}
.k-auth-step {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-body-sm);
  color: var(--mute);
}
.k-auth-step-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--line);
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--mute-2);
  flex-shrink: 0;
}
.k-auth-step.is-done .k-auth-step-dot {
  background: var(--success);
  color: #fff;
}
.k-auth-step.is-done .k-auth-step-dot::after { content: "✓"; }
.k-auth-step.is-now {
  color: var(--ink);
}
.k-auth-step.is-now .k-auth-step-dot {
  border: 1.5px solid var(--accent);
  background: var(--surface);
}
.k-auth-step.is-now .k-auth-step-dot::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: k-pulse 1.2s var(--ease-in-out) infinite;
}
@keyframes k-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Error / denied state coloring */
.k-auth-state-error .k-auth-stage-mark {
  background: var(--danger-soft);
  color: var(--danger);
}
.k-auth-state-pending .k-auth-stage-mark {
  background: var(--warn-soft);
  color: var(--warn);
}

.k-auth-actions {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 24px;
}