/* ────────────────────────────────────────────────────────────
   App Header — shared dark-control component classes
   Used inside <header style="background:var(--bg-dark-hero);">
   on every authed page. Source: design system §10.
   ──────────────────────────────────────────────────────────── */

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-dark-button);
  border: 1px solid var(--border-on-dark);
  border-radius: 12px;
  padding: 8px 16px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.btn-dark:hover         { border-color: rgba(255,255,255,0.5); }
.btn-dark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Select variant — adds inline-SVG chevron + min-width.
   Use on a <select> alongside class="btn-dark btn-dark--select". */
.btn-dark--select {
  padding: 12px 40px 12px 16px;
  font-size: 14px;
  min-width: 220px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Danger variant — for the "Close survey" pill in the hero. */
.btn-dark--danger { background: var(--color-toxic); }
.btn-dark--danger:hover { border-color: rgba(255,255,255,0.5); }