/* QuickTap — shared UI building blocks.
 *
 * Loaded from base.html before any page-specific <style> block, so per-template
 * rules can override these when they truly need to. Keep this file to genuinely
 * reusable patterns; page-specific layouts stay inline.
 *
 * Design tokens (--bg, --surface, --border, --text-muted, …) are defined in
 * base.html's :root block and are available everywhere this file is loaded.
 */

/* ── Per-unit choice block (system_delete, transfer dialogs, etc.) ── */
.qt-unit-block {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--surface-0);
}
.qt-unit-block:last-child { margin-bottom: 0; }
.qt-unit-block-head {
  font-size: 0.72rem; color: #93c5fd; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.qt-unit-block-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-strong); font-size: 0.95rem;
  margin-bottom: 0.55rem;
}
.qt-unit-block-choice {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.4rem; cursor: pointer;
  color: var(--text); font-size: 0.85rem;
  border-radius: 6px;
  transition: background 0.12s;
}
.qt-unit-block-choice:hover { background: var(--surface-3); }
.qt-unit-block-choice input { margin: 0; }
.qt-unit-block-choice .qt-choice-hint {
  color: var(--text-muted); font-size: 0.78rem; margin-left: 0.3rem;
}

/* Password strength meter (static/js/password-strength.js) */
.pw-meter { margin: 0.4rem 0 0.2rem; }
.pw-meter-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; height: 5px;
}
.pw-meter-bar span {
  background: var(--border-2); border-radius: 2px;
  transition: background 0.15s ease;
}
.pw-meter-meta {
  display: flex; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.3rem; font-size: 0.75rem;
}
.pw-meter-label { font-weight: 600; }
.pw-meter-hint { color: var(--text-muted); text-align: right; }