/* ccm-login.css — member sign-in page */

.mlogin-wrap {
  min-height: calc(100vh - 120px);
  display: flex; align-items: center; justify-content: center;
  padding: 120px 20px 60px;
}

.mlogin-box {
  /* Light island in every theme (like the sponsor strip) — re-declaring
     the variables keeps all text inside legible when the page goes dark. */
  --bg: #ffffff; --surface: #f5f5f5; --surface2: #fafafa; --surface3: #efefef;
  --text: #1a1a1a; --text-secondary: #555555; --muted: #6b6b6b;
  --text-faint: #aaaaaa; --border: #e0e0e0; --border-strong: #1a1a1a;
  background: white; color: var(--text); /* re-resolve — children inherit the island's text colour */
  border: 1px solid var(--border); border-radius: 8px;
  padding: 48px; width: 440px; max-width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.mlogin-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--red); margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.mlogin-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--red); }

.mlogin-title {
  font-family: var(--font-display); font-weight: 900; font-size: var(--text-3xl);
  text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.mlogin-title em { font-style: italic; color: var(--red); }

.mlogin-intro {
  font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6;
  margin-bottom: 24px;
}

.mlogin-view { display: none; }
.mlogin-view.visible { display: block; }

.mlogin-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.mlogin-label {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.mlogin-input {
  font-family: var(--font-body); font-size: var(--text-md);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 10px 12px; color: var(--text); background: var(--bg);
  transition: border-color 0.15s;
}
.mlogin-input:focus { border-color: var(--red); }
textarea.mlogin-input { resize: vertical; min-height: 90px; line-height: 1.5; }

.mlogin-code-input {
  font-family: var(--font-mono); font-size: var(--text-xl); letter-spacing: 0.4em;
  text-align: center;
}

.mlogin-btn {
  width: 100%; margin-top: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em;
  text-transform: uppercase; background: var(--red); border: none; color: var(--on-accent);
  padding: 12px; border-radius: 4px; cursor: pointer; transition: opacity 0.15s;
}
.mlogin-btn:hover    { opacity: 0.85; }
.mlogin-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mlogin-btn-quiet {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
}

.mlogin-error {
  font-size: var(--text-base); color: var(--red); margin-top: 12px;
  padding: 10px 12px; background: #fff5f5; border: 1px solid #ffd0d0;
  border-radius: 4px; display: none;
}
.mlogin-error.visible { display: block; }

.mlogin-note {
  font-size: var(--text-sm); color: var(--muted); margin-top: 14px; line-height: 1.5;
}
.mlogin-note a { color: var(--muted); text-decoration: underline; cursor: pointer; }
.mlogin-note a:hover { color: var(--red); }

.mlogin-remember {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: var(--text-base); color: var(--text); margin-bottom: 4px;
}
.mlogin-remember input { margin-top: 2px; flex-shrink: 0; accent-color: var(--red); }
.mlogin-remember-hint { display: block; font-size: var(--text-sm); color: var(--muted); margin-top: 1px; }

.mlogin-footer-links {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
  text-align: center; font-size: var(--text-sm); color: var(--muted);
}
.mlogin-footer-links a { color: var(--muted); text-decoration: underline; }
.mlogin-footer-links a:hover { color: var(--red); }

/* Household disambiguation list */
.mlogin-candidate {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; margin-bottom: 10px; transition: border-color 0.15s;
}
.mlogin-candidate:hover { border-color: var(--red); }
.mlogin-candidate input { margin-top: 3px; flex-shrink: 0; accent-color: var(--red); }
.mlogin-candidate-name { display: block; font-weight: 600; font-size: var(--text-md); }
.mlogin-candidate-meta { display: block; }
.mlogin-candidate-meta {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

.mlogin-success-icon { font-size: var(--text-3xl); margin-bottom: 12px; }

@media (max-width: 860px) {
  .mlogin-wrap { padding-top: 100px; }
  .mlogin-box { padding: 32px 24px; }
}