/* ── Airlock: the logged-out shell (design/components.md, 2026-07-01) ── */
body.airlock {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg);
}
.airlock-col {
  width: 100%;
  max-width: 400px;               /* deliberate cap: form, not workspace */
  padding: var(--sp-4);
  margin-top: 18vh;               /* top-biased vertical placement */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.airlock-col--wide { max-width: 480px; }
.airlock-brand {
  font-family: var(--font-mono);
  color: var(--text);
  letter-spacing: 0.02em;
}
.airlock-card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.airlock-h1 { font-size: var(--text-xl); margin: 0 0 var(--sp-5); }
.airlock-error {
  border-left: 3px solid var(--red);
  color: var(--text);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border-radius: 0 4px 4px 0;
}
.airlock-wide-btn { width: 100%; justify-content: center; }
.airlock-divider {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--faint); margin: var(--sp-5) 0;
}
.airlock-divider::before, .airlock-divider::after {
  content: ""; flex: 1; border-top: 1px solid var(--border-soft);
}
.airlock-remember {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); margin: var(--sp-4) 0 var(--sp-5); cursor: pointer;
  min-height: 44px;
}
.airlock-code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 1.3em;
}
.airlock-code--recovery { letter-spacing: 0.1em; font-size: 1.1em; }
.airlock-hint { color: var(--muted); margin: var(--sp-3) 0 var(--sp-5); }
.airlock-alt { margin-top: var(--sp-4); text-align: center; }
.airlock-alt a { color: var(--muted); }
.airlock-alt a:hover { color: var(--text); }
.airlock-foot {
  display: flex; justify-content: center; gap: var(--sp-2);
  color: var(--faint);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
}
/* QR sits on a white tile — inverted QR codes fail to scan */
.qr-tile {
  background: #fff; border-radius: var(--r-md); padding: var(--sp-4);
  display: flex; justify-content: center; margin-bottom: var(--sp-4);
}
.qr-tile img { display: block; width: 180px; height: 180px; }
.airlock-secret {
  font-family: var(--font-mono);
  color: var(--muted); text-align: center; word-break: break-all;
  margin-bottom: var(--sp-5); user-select: all;
}
.codes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (max-width: 420px) {
  .airlock-col { margin-top: 8vh; }
  .airlock-card { padding: var(--sp-5); }
}