/* @cohost/ui — shared component styles (login shell, buttons, fields).
 * Requires tokens.css. Class-prefixed `cohost-` to avoid host-site clashes.
 * The login shell mirrors the portal's split layout (form left, quote right).
 */

.cohost-login {
  min-height: 100vh;
  display: flex;
  font-family: var(--cohost-font-body);
  color: var(--cohost-text);
  background: var(--cohost-cream);
}
.cohost-login__form {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.cohost-login__inner { width: 100%; max-width: 380px; }
.cohost-login__logo { height: 34px; width: auto; margin-bottom: 32px; }
.cohost-login__title {
  font-family: var(--cohost-font-head);
  letter-spacing: var(--cohost-tracking-head);
  font-size: 30px;
  line-height: 1.1;
  color: var(--cohost-navy);
  margin: 0 0 6px;
}
.cohost-login__sub { color: var(--cohost-text-muted); margin: 0 0 28px; font-size: 15px; }
.cohost-login__panel {
  flex: 1 1 50%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--cohost-navy);
}
.cohost-login__quote {
  max-width: 400px;
  text-align: center;
  font-family: var(--cohost-font-head);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.cohost-login__cite { display: block; margin-top: 16px; font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
@media (min-width: 1024px) { .cohost-login__panel { display: flex; } }

/* Fields */
.cohost-field { margin-bottom: 18px; text-align: left; }
.cohost-label { display: block; font-size: 13px; font-weight: 600; color: var(--cohost-navy); margin-bottom: 6px; }
.cohost-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cohost-border-strong);
  border-radius: 10px;
  background: var(--cohost-surface);
  padding: 11px 13px;
  font: 400 14px/1.4 var(--cohost-font-body);
  color: var(--cohost-navy);
  transition: border-color .15s, box-shadow .15s;
}
.cohost-input::placeholder { color: var(--cohost-text-muted); opacity: .7; }
.cohost-input:focus {
  outline: none;
  border-color: var(--cohost-orange);
  box-shadow: 0 0 0 3px rgba(238, 84, 36, 0.16);
}

/* Buttons */
.cohost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: var(--cohost-orange);
  color: #fff;
  font: 600 15px/1 var(--cohost-font-body);
  padding: 13px 20px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.cohost-btn:hover { background: var(--cohost-orange-deep); }
.cohost-btn:active { transform: translateY(1px); }
.cohost-btn--ghost { background: transparent; color: var(--cohost-navy); border: 1px solid var(--cohost-border-strong); }
.cohost-btn--ghost:hover { background: var(--cohost-cream); }

.cohost-note { font-size: 13px; color: var(--cohost-text-muted); margin-top: 18px; }
.cohost-note a { color: var(--cohost-orange); }
.cohost-alert {
  border-radius: 10px;
  background: rgba(229, 62, 62, 0.08);
  border: 1px solid rgba(229, 62, 62, 0.2);
  color: var(--cohost-error);
  padding: 10px 13px;
  font-size: 13px;
  margin-bottom: 18px;
}