/*
Command Lab ログイン機能 (メールOTP認証) のスタイル。
docs/DESIGN_REGULATION.md の方針に従い --clab-* トークン / .clab-* 名前空間で実装。
*/

.clab-auth-header {
  display: flex;
  align-items: center;
  gap: var(--clab-space-3);
}

.clab-auth-header__email {
  font-family: var(--clab-font-mono);
  font-size: var(--clab-text-sm);
  color: var(--clab-text-secondary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clab-auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--clab-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--clab-space-4);
  background: rgba(20, 20, 22, 0.6);
}

.clab-auth-backdrop[hidden] {
  display: none;
}

.clab-auth-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
}

.clab-auth-modal__close {
  position: absolute;
  top: var(--clab-space-3);
  right: var(--clab-space-3);
  border: none;
  background: transparent;
  color: var(--clab-text-muted);
  font-size: var(--clab-text-xl);
  line-height: 1;
  cursor: pointer;
  padding: var(--clab-space-1);
}

.clab-auth-modal__close:hover {
  color: var(--clab-text-primary);
}

.clab-auth-modal h2 {
  font-size: var(--clab-text-lg);
  color: var(--clab-text-primary);
  margin: 0 0 var(--clab-space-4);
}

.clab-auth-modal p.clab-auth-desc {
  font-size: var(--clab-text-sm);
  color: var(--clab-text-secondary);
  margin: 0 0 var(--clab-space-4);
}

.clab-auth-modal form {
  display: flex;
  flex-direction: column;
  gap: var(--clab-space-3);
}

.clab-auth-otp-row {
  display: flex;
  gap: var(--clab-space-2);
  justify-content: space-between;
}

.clab-auth-otp-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-family: var(--clab-font-mono);
  font-size: var(--clab-text-lg);
}

.clab-auth-status {
  min-height: 1.2em;
  font-size: var(--clab-text-sm);
  color: var(--clab-text-secondary);
}

.clab-auth-status--error {
  color: var(--clab-danger);
}

.clab-auth-link-row {
  display: flex;
  justify-content: space-between;
  margin-top: var(--clab-space-2);
}

.clab-auth-link-btn {
  border: none;
  background: transparent;
  color: var(--clab-text-secondary);
  font-size: var(--clab-text-sm);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.clab-auth-link-btn:hover {
  color: var(--clab-text-primary);
}