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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font: inherit;
  font-size: 14px;
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
  text-decoration: none;   /* .btn is used on <a> as well as <button> */
}

/* 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: 400;
  padding: 9px 6px;
}

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

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

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

.btn--outline {
  background: transparent;
  border-color: var(--border-4);
  color: var(--text-2);
  font-weight: 400;
  padding: 8px 16px;
}

.btn--outline:hover {
  border-color: #3d4f60;
  background: #141f2b;
}

.btn--outline:active {
  background: #0f1922;
}

/* ---------- Primary ---------- */

/* Flat fill, no gradient or glow — the rest of the UI is flat, and the primary
   button matches the outline buttons and inputs in height (39px). */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent-2);
  font-weight: 400;
  padding: 8px 18px;
  font-size: 14px;
}

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

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

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

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

.btn--pill {
  background: rgba(20, 184, 166, .1);
  border-color: rgba(20, 184, 166, .32);
  color: var(--accent-lt2);
  font-weight: 400;
  font-size: 13.5px;
  padding: 7px 13px;
}

.btn--pill:hover {
  background: rgba(20, 184, 166, .18);
}

.btn--pill:active {
  background: rgba(20, 184, 166, .26);
  border-color: rgba(20, 184, 166, .5);
}

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

/* Destructive on hover — it's only used to remove a row. */
.icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-4);
  border-radius: 8px;
  color: var(--text-4);
  cursor: pointer;
  transition: all .15s;
}

.icon-btn:hover {
  border-color: #7a3b3b;
  color: #f0a0a0;
  background: rgba(200, 80, 80, .08);
}

.icon-btn:active {
  background: rgba(200, 80, 80, .16);
}

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

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

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

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

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

/* A real <a> that leaves the flow ("browse policies ↗"). */
.link-out {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--accent-lt);
  text-decoration: none;
}

.link-out:hover {
  color: var(--accent-lt2);
  text-decoration: underline;
}

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

.link-out--tight {
  margin-top: 7px;
}