/* password-generator — tool-specific styles.
   Brand/chrome: /shared/apitools-theme.css  |  Framework: vendored PicoCSS */

/* ── Mode tab pills ──────────────────────────────────────────────────────── */
.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.mode-tabs button {
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 2rem;
  border: 1px solid var(--pico-muted-border-color);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mode-tabs button.active {
  background: var(--pico-primary);
  border-color: var(--pico-primary);
  color: var(--pico-primary-inverse);
}

/* ── Mode panels ─────────────────────────────────────────────────────────── */
.mode-panel {
  margin-bottom: 1rem;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.5rem;
}

.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  cursor: pointer;
}

/* ── Generate button ─────────────────────────────────────────────────────── */
.generate-btn {
  margin-top: 0.5rem;
  min-width: 10rem;
}

/* ── Result card ─────────────────────────────────────────────────────────── */
.result-card {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}

.password-display {
  display: block;
  font-size: clamp(1rem, 3vw, 1.4rem);
  word-break: break-all;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--pico-code-background-color);
  border-radius: var(--pico-border-radius);
  user-select: all;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* ── Entropy badge ───────────────────────────────────────────────────────── */
.entropy-badge {
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 2rem;
  background: var(--pico-muted-color);
  color: var(--pico-background-color);
  font-weight: 600;
  opacity: 0.75;
}

/* ── Strength badge ──────────────────────────────────────────────────────── */
.strength-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.strength-weak        { background: #f87171; color: #1a0000; }
.strength-fair        { background: #fb923c; color: #1a0000; }
.strength-strong      { background: #2dd4bf; color: #001a18; }
.strength-very-strong { background: #4ade80; color: #001a0a; }

/* ── Copy button ─────────────────────────────────────────────────────────── */
.copy-btn {
  font-size: 0.9rem;
  padding: 0.3rem 1rem;
}

/* ── API hint ────────────────────────────────────────────────────────────── */
.api-hint {
  margin-top: 2rem;
  opacity: 0.7;
}

/* Alpine cloak — hide x-show panels before Alpine initialises to avoid flash */
[x-cloak] { display: none !important; }