/* Sourced from platform/identity/embed/ — regenerate, do not edit here. */
/**
 * embed/client.css — minimal, themeable styles for the Keelhelm embedded sign-in widget
 * (embed/client.js). Every visual gets a CSS custom property with a sane default so a consuming
 * app can restyle without editing this file — set the properties on the widget's container
 * (or any ancestor), e.g.:
 *
 *   #keelhelm-signin { --kh-embed-accent: #7c3aed; --kh-embed-radius: 6px; }
 */

.kh-embed {
  --kh-embed-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kh-embed-fg: #14161a;
  --kh-embed-muted: #6b7280;
  --kh-embed-bg: #ffffff;
  --kh-embed-border: #cbd0d6;
  --kh-embed-accent: #1f6feb;
  --kh-embed-accent-fg: #ffffff;
  --kh-embed-ghost-bg: #e9edf2;
  --kh-embed-err-bg: #fdecec;
  --kh-embed-err-fg: #9b1c1c;
  --kh-embed-err-border: #f5c2c2;
  --kh-embed-radius: 9px;
  --kh-embed-gap: 14px;

  display: flex;
  flex-direction: column;
  gap: var(--kh-embed-gap);
  font-family: var(--kh-embed-font);
  color: var(--kh-embed-fg);
  background: var(--kh-embed-bg);
  max-width: 360px;
}

@media (prefers-color-scheme: dark) {
  .kh-embed {
    --kh-embed-fg: #e7e9ee;
    --kh-embed-muted: #9aa3af;
    --kh-embed-bg: #171a21;
    --kh-embed-border: #333;
    --kh-embed-ghost-bg: #22262e;
    --kh-embed-err-bg: #2a1414;
    --kh-embed-err-fg: #f2a3a3;
    --kh-embed-err-border: #4a2020;
  }
}

.kh-embed-h {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.kh-embed-sub {
  color: var(--kh-embed-muted);
  font-size: 13.5px;
  margin: 0;
}

.kh-embed-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
}

.kh-embed-input {
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--kh-embed-border);
  border-radius: var(--kh-embed-radius);
  background: transparent;
  color: inherit;
}

.kh-embed-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px;
  border: 0;
  border-radius: var(--kh-embed-radius);
  cursor: pointer;
  background: var(--kh-embed-accent);
  color: var(--kh-embed-accent-fg);
}

.kh-embed-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kh-embed-btn.kh-embed-ghost {
  background: var(--kh-embed-ghost-bg);
  color: var(--kh-embed-fg);
}

.kh-embed-link {
  font: inherit;
  font-size: inherit;
  color: var(--kh-embed-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.kh-embed-err {
  background: var(--kh-embed-err-bg);
  color: var(--kh-embed-err-fg);
  border: 1px solid var(--kh-embed-err-border);
  border-radius: var(--kh-embed-radius);
  padding: 10px 12px;
  font-size: 14px;
}