/*
 * General-purpose button/tag primitives -- distinct from components.css
 * (Story 51's Visual Builder block library): these are plain UI elements
 * used directly in hand-built views (My List status bar, session cards),
 * not composable blocks. Translated from a design reference's own button/
 * tag classes onto this site's actual Modernist tokens (tokens.css) rather
 * than the reference's own separate, larger token set -- same rule as
 * every other component (see components.css's own doc comment).
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: var(--border-width-rule) solid transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-none);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-text);
  border-color: var(--color-text);
}

.btn-secondary {
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}

.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

.btn-block {
  width: 100%;
  margin-top: var(--space-2);
  justify-content: flex-start;
  text-align: left;
}

/* — tags — */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-none);
}

.tag-accent {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.tag-neutral {
  background: var(--color-background);
  color: var(--color-text-muted);
}

.tag-outline {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* — form fields — */
.field {
  display: block;
  margin: 0 0 var(--space-3);
}

.field > span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.input {
  width: 100%;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width-rule) solid var(--color-border);
  border-radius: var(--radius-none);
}

.input:focus-visible {
  outline: var(--border-width-rule) solid var(--color-accent);
  outline-offset: -2px;
}

textarea.input {
  min-height: 5.5rem;
  resize: vertical;
}