/* ============================================================================
   qci-gate · gate.css — the QCI family front door. Sparse, editorial, dark.
   Consumes qci-ui custom properties ONLY (vendor/qci-ui/v1/css/qci-tokens.css);
   zero raw hex here. The gate deliberately keeps the kit's neutral --accent:
   products claim colour, the door stays quiet.
   ========================================================================== */

.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(1100px 540px at 50% -12%, var(--accent-glow), transparent 62%),
    var(--bg);
}

.gate-card {
  width: 100%;
  max-width: 384px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.gate-logo {
  height: 24px;
  width: auto;
  align-self: flex-start;
}

.gate-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.gate-title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.gate-field { display: block; }
.gate-label {
  display: block;
  margin-bottom: var(--space-1);
}

.gate-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gate-input:hover { border-color: var(--accent-2); }
.gate-input:focus-visible {
  outline: none;
  border-color: var(--accent-2);
  background: var(--bg-3);
}
.gate-input[readonly] {
  color: var(--ink-2);
  background: var(--bg-2);
  border-color: var(--line);
  pointer-events: none;
}

.gate-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

.gate-submit {
  height: 40px;
  margin-top: var(--space-2);
  border: 0;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--bg-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  transition: opacity var(--t-fast) var(--ease);
}
.gate-submit:hover { opacity: .86; }
.gate-submit:active { opacity: .72; }

.gate-error,
.gate-msg {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.gate-error {
  color: var(--high);
  background: var(--high-bg);
  border: 1px solid color-mix(in srgb, var(--high) 32%, transparent);
}
.gate-msg {
  color: var(--calm);
  background: var(--calm-bg);
  border: 1px solid color-mix(in srgb, var(--calm) 32%, transparent);
}

.gate-foot {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.6;
}