/* Botzz components — buttons, fields, alerts, nav, footer */

/* ---------- Buttons ---------- */
.bz-btn {
  --_bg: var(--bz-paper-2);
  --_fg: var(--bz-text);
  --_bd: var(--bz-line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--bz-font-body);
  font-size: var(--bz-fs-14);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: var(--bz-r-2);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--bz-dur-1) var(--bz-ease),
              background var(--bz-dur-1) var(--bz-ease),
              border-color var(--bz-dur-1) var(--bz-ease),
              box-shadow var(--bz-dur-2) var(--bz-ease);
  white-space: nowrap;
}
.bz-btn:hover { transform: translateY(-1px); }
.bz-btn:active { transform: translateY(0); }
.bz-btn:disabled, .bz-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.bz-btn .bz-icon { font-size: 1.125em; }

.bz-btn--lg { padding: 0.95rem 1.6rem; font-size: var(--bz-fs-16); border-radius: var(--bz-r-3); }
.bz-btn--sm { padding: 0.5rem 0.9rem; font-size: var(--bz-fs-12); }

.bz-btn--primary {
  --_bg: var(--bz-ink);
  --_fg: var(--bz-text-on-ink);
  --_bd: var(--bz-ink);
  box-shadow: var(--bz-shadow-2);
}
.bz-btn--primary:hover { --_bg: var(--bz-ink-2); --_bd: var(--bz-ink-2); box-shadow: var(--bz-shadow-3); }
[data-theme="dark"] .bz-btn--primary { --_bg: var(--bz-cyan); --_fg: var(--bz-ink); --_bd: var(--bz-cyan); }
[data-theme="dark"] .bz-btn--primary:hover { --_bg: var(--bz-cyan-hi); --_bd: var(--bz-cyan-hi); }

.bz-btn--cyan {
  --_bg: var(--bz-cyan-lo);
  --_fg: white;
  --_bd: var(--bz-cyan-lo);
  box-shadow: var(--bz-shadow-cyan);
}
.bz-btn--cyan:hover { --_bg: oklch(0.50 0.22 246); --_bd: oklch(0.50 0.22 246); }

.bz-btn--ghost {
  --_bg: transparent;
  --_bd: var(--bz-line-2);
}
.bz-btn--ghost:hover { --_bg: var(--bz-paper-2); }

.bz-btn--on-ink {
  --_bg: oklch(0.97 0.005 252 / 0.10);
  --_fg: var(--bz-text-on-ink);
  --_bd: oklch(0.97 0.005 252 / 0.20);
}
.bz-btn--on-ink:hover { --_bg: oklch(0.97 0.005 252 / 0.18); --_bd: oklch(0.97 0.005 252 / 0.32); }

.bz-btn--success {
  --_bg: var(--bz-success);
  --_fg: white;
  --_bd: var(--bz-success);
}
.bz-btn--success:hover { --_bg: oklch(0.62 0.16 155); --_bd: oklch(0.62 0.16 155); }

/* ---------- Fields ---------- */
.bz-field { display: flex; flex-direction: column; gap: 0.4rem; }
.bz-field + .bz-field { margin-top: 1.05rem; }

.bz-label {
  font-size: var(--bz-fs-14);
  font-weight: 600;
  color: var(--bz-text);
  letter-spacing: -0.005em;
}

.bz-input,
.bz-textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  font-family: var(--bz-font-body);
  font-size: var(--bz-fs-16);
  line-height: 1.4;
  color: var(--bz-text);
  background: var(--bz-paper);
  border: 1px solid var(--bz-line-2);
  border-radius: var(--bz-r-2);
  transition: border-color var(--bz-dur-1) var(--bz-ease),
              box-shadow var(--bz-dur-1) var(--bz-ease);
  -webkit-appearance: none; appearance: none;
}
[data-theme="dark"] .bz-input,
[data-theme="dark"] .bz-textarea { background: var(--bz-paper-2); }

.bz-input::placeholder { color: var(--bz-text-mute); }

.bz-input:focus,
.bz-textarea:focus {
  outline: none;
  border-color: var(--bz-cyan);
  box-shadow: 0 0 0 3px var(--bz-cyan-soft);
}

.bz-input[aria-invalid="true"],
.bz-input.input-validation-error {
  border-color: var(--bz-danger);
  box-shadow: 0 0 0 3px var(--bz-danger-soft);
}

.bz-field-help { font-size: var(--bz-fs-12); color: var(--bz-text-mute); }
.bz-field-error,
.field-validation-error {
  font-size: var(--bz-fs-12);
  font-weight: 500;
  color: var(--bz-danger);
  display: block;
}

.bz-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem;
  background: var(--bz-paper-2);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-r-2);
  cursor: pointer;
}
.bz-checkbox input[type="checkbox"] {
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--bz-cyan-lo);
  flex-shrink: 0;
  cursor: pointer;
}
.bz-checkbox-text { font-size: var(--bz-fs-14); color: var(--bz-text); line-height: 1.45; }
.bz-checkbox-text a { color: var(--bz-cyan-lo); font-weight: 600; border-bottom: 1px solid currentColor; }
[data-theme="dark"] .bz-checkbox-text a { color: var(--bz-cyan); }

/* ---------- Alerts ---------- */
.bz-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  background: var(--bz-paper-2);
  border: 1px solid var(--bz-line-2);
  border-radius: var(--bz-r-2);
  font-size: var(--bz-fs-14);
  color: var(--bz-text);
}
.bz-alert .bz-icon { color: var(--bz-cyan-lo); margin-top: 0.1em; font-size: 1.15em; }
[data-theme="dark"] .bz-alert .bz-icon { color: var(--bz-cyan); }
.bz-alert--success { background: var(--bz-success-soft); border-color: oklch(0.68 0.16 155 / 0.30); }
.bz-alert--success .bz-icon { color: var(--bz-success); }
.bz-alert--danger { background: var(--bz-danger-soft); border-color: oklch(0.60 0.20 25 / 0.30); color: var(--bz-danger); }
.bz-alert--danger .bz-icon { color: var(--bz-danger); }

.bz-validation-summary {
  background: var(--bz-danger-soft);
  border: 1px solid oklch(0.60 0.20 25 / 0.30);
  border-radius: var(--bz-r-2);
  padding: 0.85rem 1rem;
  color: var(--bz-danger);
  font-size: var(--bz-fs-14);
  margin-bottom: 1rem;
}
.bz-validation-summary ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.bz-validation-summary ul:empty,
.bz-validation-summary:has(ul:empty) { display: none; }
.validation-summary-valid { display: none; }

/* ---------- Tags / pills ---------- */
.bz-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: var(--bz-paper-2);
  border: 1px solid var(--bz-line);
  border-radius: var(--bz-r-pill);
  font-size: var(--bz-fs-12);
  font-weight: 500;
  color: var(--bz-text-soft);
}
.bz-tag--cyan { background: var(--bz-cyan-soft); border-color: oklch(0.55 0.20 246 / 0.30); color: var(--bz-cyan-lo); }
[data-theme="dark"] .bz-tag--cyan { color: var(--bz-cyan); }

/* ---------- Public navigation ---------- */
.bz-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(0.975 0.008 252 / 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--bz-dur-1) var(--bz-ease),
              background var(--bz-dur-1) var(--bz-ease);
}
.bz-nav[data-scrolled="true"] { border-bottom-color: var(--bz-line); }
[data-theme="dark"] .bz-nav { background: oklch(0.16 0.02 252 / 0.80); }

.bz-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.bz-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.bz-nav__brand-mark {
  width: 34px; height: 34px;
  display: block;
  object-fit: contain;
}

/* "BotZz" wordmark rendered in HTML so it adapts to theme automatically.
 * "Bot" inherits ink color, "Zz" is the cyan accent. The pair stays
 * coherent on any background by reading from the active theme tokens. */
.bz-brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--bz-font-display);
  font-weight: 700;
  font-size: var(--bz-fs-21);
  letter-spacing: -0.045em;
  line-height: 1;
}
.bz-brand__bot { color: var(--bz-ink); }
.bz-brand__zz  { color: var(--bz-cyan-lo); }
[data-theme="dark"] .bz-brand__bot { color: var(--bz-text-on-ink); }
[data-theme="dark"] .bz-brand__zz  { color: var(--bz-cyan); }

/* When the wordmark sits on the always-dark auth panel or other ink
 * surfaces, force the light treatment regardless of theme. */
.bz-auth__brand .bz-brand__bot,
.bz-closer .bz-brand__bot,
.bz-cta .bz-brand__bot,
.bz-steps .bz-brand__bot,
.bz-silence .bz-brand__bot {
  color: var(--bz-text-on-ink);
}
.bz-auth__brand .bz-brand__zz,
.bz-closer .bz-brand__zz,
.bz-cta .bz-brand__zz,
.bz-steps .bz-brand__zz,
.bz-silence .bz-brand__zz {
  color: var(--bz-cyan);
}

.bz-brand--lg { font-size: var(--bz-fs-28); letter-spacing: -0.05em; }
.bz-brand--xl { font-size: var(--bz-fs-37); letter-spacing: -0.05em; }

.bz-nav__actions { display: flex; align-items: center; gap: 0.6rem; }
.bz-nav__link {
  font-size: var(--bz-fs-14);
  font-weight: 500;
  color: var(--bz-text-soft);
  padding: 0.5rem 0.7rem;
  border-radius: var(--bz-r-1);
}
.bz-nav__link:hover { color: var(--bz-text); background: var(--bz-paper-2); }

/* ---------- Footer ---------- */
.bz-footer {
  background: var(--bz-paper-2);
  border-top: 1px solid var(--bz-line);
  padding: 3rem 0 2rem;
  margin-top: auto;
}
.bz-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 720px) { .bz-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.bz-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.bz-footer__icon { display: block; flex-shrink: 0; }
.bz-footer__tag { color: var(--bz-text-mute); font-size: var(--bz-fs-14); margin-top: 0.6rem; max-width: 36ch; }

.bz-footer h4 {
  font-size: var(--bz-fs-14);
  font-weight: 600;
  color: var(--bz-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.bz-footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.bz-footer__links a { color: var(--bz-text-soft); font-size: var(--bz-fs-14); transition: color var(--bz-dur-1) var(--bz-ease); }
.bz-footer__links a:hover { color: var(--bz-cyan-lo); }
[data-theme="dark"] .bz-footer__links a:hover { color: var(--bz-cyan); }

.bz-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bz-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--bz-fs-12);
  color: var(--bz-text-mute);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- Theme toggle ---------- */
.bz-theme-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--bz-paper);
  border: 1px solid var(--bz-line-2);
  border-radius: var(--bz-r-pill);
  color: var(--bz-text);
  cursor: pointer;
  z-index: 1040;
  box-shadow: var(--bz-shadow-2);
  transition: transform var(--bz-dur-1) var(--bz-ease), box-shadow var(--bz-dur-2) var(--bz-ease);
}
.bz-theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--bz-shadow-3); }
.bz-theme-toggle[aria-pressed="true"] .bz-icon--sun { display: none; }
.bz-theme-toggle[aria-pressed="false"] .bz-icon--moon { display: none; }