/* Sign-in screen (MYC-5 / MYC-8).
 *
 * The first surface a visitor sees after clicking through from my-ceo.ai, so
 * it is where a visual seam would be most obvious. Uses the brand tokens
 * directly rather than the app's inherited variables.
 */

.myceo-login {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--myceo-bg-core);
  color: var(--myceo-text-primary);
  font-family: var(--myceo-font-body);
  padding: 2rem 1rem;
}

.myceo-login-card {
  width: 100%;
  max-width: 26rem;
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 10px;
  padding: 2.5rem 2rem;
}

.myceo-login .myceo-wordmark { padding: 0 0 1.5rem; }

.myceo-login-intro {
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--myceo-text-secondary);
}

.myceo-login-intro strong { color: var(--myceo-accent-blue); font-weight: 500; }

.myceo-login label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--myceo-text-secondary);
}

.myceo-login input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
  padding: 0.7rem 0.85rem;
  background: var(--myceo-bg-core);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 6px;
  color: var(--myceo-text-primary);
  font-family: inherit;
  font-size: 0.95rem;
}

.myceo-login input:focus {
  outline: none;
  border-color: var(--myceo-accent-blue);
}

.myceo-login button {
  width: 100%;
  padding: 0.75rem;
  background: var(--myceo-accent-blue);
  color: var(--myceo-bg-core);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.myceo-login button:disabled { opacity: 0.6; cursor: default; }

.myceo-login-hint {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.78rem;
  color: var(--myceo-text-dim);
}

/* The code-in-spam warning — deliberately more prominent than a plain hint,
   because a code lost to a junk folder is where the sign-up funnel leaks. */
.myceo-spam-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: -0.5rem 0 1.25rem;
  padding: 10px 12px;
  border: 1px solid var(--myceo-accent-blue);
  border-radius: 8px;
  background: rgba(125, 211, 252, 0.10);   /* fallback */
  background: color-mix(in srgb, var(--myceo-accent-blue) 12%, transparent);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--myceo-text-secondary);
}
.myceo-spam-note strong { color: var(--myceo-accent-blue); font-weight: 600; }
.myceo-spam-ico { color: var(--myceo-accent-blue); font-size: 1rem; line-height: 1.4; flex-shrink: 0; }

.myceo-login-error {
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  background: rgba(225, 29, 72, 0.12);
  border: 1px solid var(--myceo-status-critical);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--myceo-text-primary);
}

/* ── Request-access form (MYC-5) ───────────────────────────────────────── */

.myceo-access-card { max-width: 30rem; }

.myceo-access-title {
  margin: 0 0 0.75rem;
  font-family: var(--myceo-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--myceo-text-primary);
}

/* Name fields sit side by side on anything wider than a phone; stacking two
   short inputs wastes the most valuable part of the form. */
.myceo-field-row { display: flex; gap: 0.75rem; }
.myceo-field-row > div { flex: 1; min-width: 0; }

@media (max-width: 480px) {
  .myceo-field-row { display: block; }
}

.myceo-login select {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
  padding: 0.7rem 0.85rem;
  background: var(--myceo-bg-core);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 6px;
  color: var(--myceo-text-primary);
  font-family: inherit;
  font-size: 0.95rem;
}

.myceo-optional {
  color: var(--myceo-text-dim);
  text-transform: none;
  letter-spacing: 0;
}

/* The privacy notice sits AT the point of capture, not in a footer - it is a
   GDPR requirement, and one nobody reads if it is somewhere else. */
.myceo-privacy {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--myceo-text-dim);
}

.myceo-access-done {
  margin: 1rem 0 0;
  padding: 0.85rem;
  background: rgba(5, 150, 105, 0.12);
  border: 1px solid var(--myceo-status-good);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--myceo-text-primary);
}

.myceo-access-footer {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: var(--myceo-text-secondary);
}

.myceo-access-footer a { color: var(--myceo-accent-blue); }

.myceo-linkish {
  background: none !important;
  border: none;
  color: var(--myceo-text-secondary);
  font-size: 0.85rem;
  padding: 0.5rem 0 0;
  cursor: pointer;
}

/* Honeypot (MYC-5). Off-screen rather than display:none or visibility:hidden -
   a bot worth worrying about skips fields hidden the obvious ways, and this
   costs nothing. Paired with aria-hidden and tabindex="-1" in the markup so no
   assistive technology or keyboard user ever lands on it. */
.myceo-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}