/* Buttons — highlighter fill, ink border, flat offset shadow (sketch style) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-s);
  border: 2px solid var(--ink);
  background: var(--highlight);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transform: rotate(-0.4deg);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: #ffd97e;
  transform: rotate(-0.4deg) translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(43, 38, 32, 0.9);
}

.btn:active {
  transform: rotate(-0.4deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(43, 38, 32, 0.9);
}

.btn:focus-visible {
  outline: 3px dashed var(--accent);
  outline-offset: 3px;
}

.btn-ghost {
  background: var(--paper);
}

.btn-ghost:hover {
  background: var(--paper-tint);
}

/* Red-pen button (regenerate / destructive-ish) */
.btn-red {
  background: var(--paper);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 3px 3px 0 rgba(216, 72, 43, 0.55);
}

.btn-red:hover {
  background: var(--accent-soft);
  box-shadow: 4px 4px 0 rgba(216, 72, 43, 0.55);
}

/* Compact button inside the navbar */
.btn-nav {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 12px;
  box-shadow: var(--shadow-btn-sm);
}

@media (max-width: 640px) {
  .btn {
    width: 100%;
  }
}