/* =========================================================
   ATOMS — buttons, forms, badges, chips, pagination, tabs
   ========================================================= */

/* ── Buttons ─────────────────────────────────────────── */
.kz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: var(--r-md);
  transition: transform .12s, background .15s, box-shadow .15s, border-color .15s;
  white-space: nowrap; user-select: none;
}
.kz-btn:active { transform: translateY(1px); }
.kz-btn:disabled, .kz-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.kz-btn[data-loading="true"] { color: transparent !important; pointer-events: none; position: relative; }
.kz-btn[data-loading="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--text-2);
  animation: kz-spin .7s linear infinite;
}
@keyframes kz-spin { to { transform: rotate(1turn); } }

.kz-btn--primary {
  background: var(--brand-500); color: #fff;
  box-shadow: 0 8px 20px -10px var(--brand-500), inset 0 -1px 0 rgba(0,0,0,.1);
}
.kz-btn--primary:hover { background: var(--brand-600); }
.kz-btn--ghost  { background: var(--surface-2); color: var(--text); }
.kz-btn--ghost:hover { background: var(--border); }
.kz-btn--line   { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.kz-btn--line:hover { border-color: var(--border-strong); }
.kz-btn--danger { background: var(--verdict-spam); color: #fff; }
.kz-btn--danger:hover { filter: brightness(0.95); }
.kz-btn--link {
  background: none; padding: 0 4px; color: var(--brand-700);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
}
.kz-btn--link:hover { text-decoration-color: currentColor; }

.kz-btn--sm { padding: 6px 10px; font-size: 13px; border-radius: var(--r-sm); }
.kz-btn--md { /* default */ }
.kz-btn--lg { padding: 14px 22px; font-size: 15px; }
.kz-btn--xl { padding: 18px 28px; font-size: 16px; border-radius: var(--r-lg); }

.kz-btn--icon { padding: 0; width: 40px; height: 40px; }
.kz-btn--icon.kz-btn--sm { width: 32px; height: 32px; }

/* ── Form controls ────────────────────────────────────── */
.kz-field {
  display: flex; flex-direction: column; gap: 6px;
}
.kz-field__label {
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.kz-field__hint  { font-size: 12px; color: var(--text-3); }
.kz-field__error { font-size: 12px; color: var(--verdict-spam); }

.kz-input,
.kz-textarea,
.kz-select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 15px; color: var(--text);
  outline: 0;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.kz-input:hover, .kz-textarea:hover, .kz-select:hover { border-color: var(--border-strong); }
.kz-input:focus, .kz-textarea:focus, .kz-select:focus {
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}
.kz-input::placeholder, .kz-textarea::placeholder { color: var(--text-3); }
.kz-textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.kz-select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}

.kz-field[data-state="error"] .kz-input,
.kz-field[data-state="error"] .kz-textarea,
.kz-field[data-state="error"] .kz-select {
  border-color: var(--verdict-spam);
  box-shadow: 0 0 0 4px var(--verdict-spam-bg);
}

.kz-input:disabled, .kz-textarea:disabled, .kz-select:disabled {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}

/* Search-pill (compact topbar search & filters) */
.kz-searchpill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; min-height: 40px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); color: var(--text-3); font-size: 14px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.kz-searchpill:focus-within { border-color: var(--brand-500); background: var(--surface); box-shadow: var(--ring); color: var(--text); }
.kz-searchpill input { border: 0; background: transparent; outline: 0; width: 100%; font-size: 14px; }

/* Checkbox + radio (custom) */
.kz-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; }
.kz-check input { position: absolute; opacity: 0; pointer-events: none; }
.kz-check__box {
  width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  display: grid; place-items: center;
  transition: all .12s var(--ease-out);
}
.kz-check input:checked + .kz-check__box {
  background: var(--brand-500); border-color: var(--brand-500);
  color: #fff;
}
.kz-check__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.5); transition: all .12s; }
.kz-check input:checked + .kz-check__box svg { opacity: 1; transform: scale(1); }
.kz-check input:focus-visible + .kz-check__box { box-shadow: var(--ring); }

.kz-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; }
.kz-radio input { position: absolute; opacity: 0; pointer-events: none; }
.kz-radio__dot {
  width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  display: grid; place-items: center;
  transition: all .12s;
}
.kz-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); transform: scale(0); transition: transform .12s; }
.kz-radio input:checked + .kz-radio__dot { border-color: var(--brand-500); }
.kz-radio input:checked + .kz-radio__dot::after { transform: scale(1); }

/* Toggle */
.kz-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.kz-toggle input { opacity: 0; width: 0; height: 0; }
.kz-toggle__track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background .15s; cursor: pointer; }
.kz-toggle__track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .18s var(--ease-out); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.kz-toggle input:checked + .kz-toggle__track { background: var(--brand-500); }
.kz-toggle input:checked + .kz-toggle__track::after { transform: translateX(18px); }

/* ── Chips & badges ──────────────────────────────────── */
.kz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.kz-chip svg { width: 12px; height: 12px; }
.kz-chip--brand { background: var(--brand-50); color: var(--brand-700); border-color: transparent; }

/* Category chip — color-coded */
.kz-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.kz-cat svg { width: 12px; height: 12px; }
.kz-cat[data-cat="spam"]  { background: var(--verdict-spam-bg); color: var(--verdict-spam); }
.kz-cat[data-cat="debt"]  { background: var(--verdict-warn-bg); color: var(--verdict-warn-ink); }
.kz-cat[data-cat="ad"]    { background: var(--verdict-ad-bg);   color: oklch(0.45 0.16 295); }
.kz-cat[data-cat="safe"]  { background: var(--verdict-safe-bg); color: var(--verdict-safe); }
.kz-cat[data-cat="useful"]{ background: var(--brand-50);        color: var(--brand-700); }
[data-theme="dark"] .kz-cat[data-cat="ad"] { color: oklch(0.85 0.12 295); }

/* Trust badge — VPN/Tor/proxy */
.kz-trust {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid currentColor;
}
.kz-trust svg { width: 10px; height: 10px; }
.kz-trust[data-level="ok"]      { color: var(--trust-ok);      background: var(--verdict-safe-bg); border-color: transparent; }
.kz-trust[data-level="suspect"] { color: var(--trust-suspect); background: var(--verdict-warn-bg); border-color: transparent; }
.kz-trust[data-level="bad"]     { color: var(--trust-bad);     background: var(--verdict-spam-bg); border-color: transparent; }

/* Number-pill — inline phone reference inside text */
.kz-numpill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  color: var(--brand-700);
  padding: 3px 8px; background: var(--brand-50);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .12s;
}
.kz-numpill:hover { background: var(--brand-100); }

/* ── Tabs ─────────────────────────────────────────────── */
.kz-tabs {
  display: flex; gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.kz-tabs button {
  padding: 10px 14px; font-size: 14px; font-weight: 600;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.kz-tabs button:hover { color: var(--text-2); }
.kz-tabs button[aria-selected="true"] {
  color: var(--text); border-color: var(--brand-500);
}

/* Pills variant — inside cards */
.kz-tabs--pills {
  border-bottom: 0; gap: 6px; padding: 4px;
  background: var(--surface-2); border-radius: var(--r-pill);
  width: fit-content;
}
.kz-tabs--pills button {
  border-radius: var(--r-pill); border-bottom: 0; margin-bottom: 0;
  padding: 6px 14px;
}
.kz-tabs--pills button[aria-selected="true"] {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ── Pagination ──────────────────────────────────────── */
.kz-pager {
  display: flex; gap: 4px; align-items: center;
  font-variant-numeric: tabular-nums;
}
.kz-pager a, .kz-pager span {
  display: inline-grid; place-items: center;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; color: var(--text-2);
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.kz-pager a:hover { background: var(--surface-2); color: var(--text); }
.kz-pager .current {
  background: var(--brand-500); color: #fff;
  box-shadow: 0 6px 14px -8px var(--brand-500);
}
.kz-pager .ellipsis { color: var(--text-3); pointer-events: none; }
.kz-pager .nav { border-color: var(--border); }
.kz-pager .nav[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ── Vote pill (used on comments) ─────────────────────── */
.kz-vote {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); overflow: hidden;
}
.kz-vote button {
  padding: 4px 10px; font-size: 12px; font-weight: 700;
  color: var(--text-2);
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
  transition: background .12s, color .12s;
}
.kz-vote button:hover { background: var(--surface-2); }
.kz-vote button[aria-pressed="true"].up { color: var(--verdict-safe); background: var(--verdict-safe-bg); }
.kz-vote button[aria-pressed="true"].dn { color: var(--verdict-spam); background: var(--verdict-spam-bg); }
.kz-vote .sep { width: 1px; align-self: stretch; background: var(--border); }