/* ============================================================
   Buttons
   .btn + variants, plus the two button shapes that aren't
   .btn at all: a square icon button and a text-only link button.

   Every variant is 32px tall so buttons line up with inputs, the
   search field and the scope toggle without per-screen nudging.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 32px;
  padding: 0 var(--space-6);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  border: 1px solid transparent;
  text-decoration: none;   /* .btn is used on <a> as well as <button> */
  white-space: nowrap;
}

/* A press is a darker fill and a 1px settle, applied near-instantly — the
   fade that suits hover would make the button feel unresponsive. */
.btn:active:not(:disabled):not(.is-disabled),
.icon-btn:active {
  transform: translateY(1px);
  transition-duration: .04s;
}

/* ---------- Ghost ---------- */

.btn--ghost {
  background: none;
  border: none;
  color: var(--text-3);
  font-weight: var(--fw-regular);
  padding: 0 var(--space-4);
}

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

.btn--ghost:active {
  color: var(--text-2);
}

/* ---------- Outline ---------- */

.btn--outline {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text-2);
  font-weight: var(--fw-regular);
}

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

.btn--outline:active {
  background: var(--surface-2);
}

/* ---------- Primary ----------
   Teal, and the only teal fill in the UI. Selection is near-white, so the
   one saturated element on screen is always the action you'd take next. */
.btn--primary {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--on-teal);
}

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

.btn--primary:active:not(:disabled):not(.is-disabled) {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

.btn--primary:disabled,
.btn--primary.is-disabled {
  background: var(--surface-3);
  border-color: var(--border-2);
  color: var(--text-dim);
  cursor: not-allowed;
}

/* ---------- Pill ---------- */

.btn--pill {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text-2);
  font-weight: var(--fw-regular);
}

.btn--pill:hover {
  background: var(--surface-3);
  border-color: var(--border-hover);
  color: var(--text);
}

.btn--pill:active {
  background: var(--surface-2);
}

/* ---------- Icon button ---------- */

/* Quiet hover treatment — the icon and surrounding context carry the action. */
.icon-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

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

.icon-btn:active {
  background: var(--hover-strong);
}

/* ---------- Link button ---------- */

/* A <button> that reads as quiet inline text ("+ add option"). */
.link-btn {
  background: none;
  border: none;
  color: var(--text-3);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  transition: color var(--dur) var(--ease);
}

.link-btn:hover {
  color: var(--text);
}

/* No box to darken, so the press steps the colour instead. */
.link-btn:active {
  color: var(--text-2);
}

/* ---------- Outbound link ---------- */

/* A real <a> that leaves the flow ("browse policies ↗"). */
.link-out {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.link-out:hover {
  color: var(--text);
}

.link-out:active {
  color: var(--text-3);
}

.link-out--tight {
  margin-top: var(--space-4);
}