/* =========================================================================
   3-controls — plain form controls. Bordered, flat, no bevels.
   ========================================================================= */

.btn, button, input[type="submit"], input[type="button"] {
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--text-color);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.45em 0.9em;
  cursor: pointer;
  line-height: 1.3;
}
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}
.btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.btn:active, button:active { background: var(--border-color); }
.btn[disabled], button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* --on-accent, not #fff: on the dark themes the accent is a *light*
   colour, so white text on it is unreadable. The token carries whichever
   ink the active theme needs on an accent-coloured fill. */
.btn-default, .btn.btn-default {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: var(--on-accent);
}
.btn-default:hover { background: var(--accent-dark); color: var(--on-accent); }

.btn-sm { font-size: var(--fs-xs); padding: 0.3em 0.6em; }
.btn-danger { border-color: var(--error); color: var(--error); }
.btn-danger:hover { background: var(--error); border-color: var(--error); color: var(--on-accent); }

/* ---- inline link list (linklist "manage" page) ------------------------ */
.cde-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.cde-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
input[type="date"], input[type="tel"], textarea, select {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--text-color);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.5em 0.6em;
  width: 100%;
  max-width: 100%;
}
textarea { min-height: 6em; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

label { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 0.3em; }

.field { margin-bottom: var(--sp-4); }

.checkbox-row, .radio-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.checkbox-row label, .radio-row label { margin: 0; color: var(--text-color); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.05em; height: 1.05em; }

.form-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--sp-4) 0;
}

.form-inline { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }