/* Buttons, chips, pills & badges. */

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.2;
  border-radius: var(--r-pill); padding: 13px 26px; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
  text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--ink-inverse); }
.btn-link { background: none; border: none; color: var(--orange-deep); padding: 13px 4px; }
.btn-icon { padding-left: 0; padding-right: 0; width: 48px; flex: none; align-self: stretch; }
.btn-icon svg { width: 18px; height: 18px; }
.btn-link.flush { padding: 0; }
.btn-link .arrow { transition: transform 200ms ease-out; display: inline-block; }
.btn-link:hover .arrow { transform: translateX(4px); }
.btn-disabled { background: var(--cream); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.btn-sm { padding: 9px 18px; font-size: 0.9rem; }
.btn-wide { width: 100%; }
.btn-flush { padding: 0; }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600;
  border-radius: var(--r-pill); padding: 5px 14px;
}
.chip-orange { background: var(--orange-tint); color: var(--orange-deep); }
.chip-blue { background: var(--blue-tint); color: var(--blue-deep); }
.chip-muted { background: var(--cream); color: var(--text-muted); border: 1px solid var(--border); }
.chip-warn { background: var(--warn-tint); color: var(--warn-deep); }
.chip-external { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.chip-red { background: #fdecec; color: #b42318; }
.chip-live { background: var(--live-tint); color: var(--live); }
.chip-spaced { margin-top: 6px; }
.chip-tight { padding: 2px 10px; }
.chip-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .chip-live::before { animation: none; } }

/* announcement pill (max one per page) */
.announce {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 7px 16px;
  font-size: 0.875rem; font-weight: 500;
  color: var(--ink); margin-bottom: 26px;
  box-shadow: var(--shadow-card);
  transition: border-color 200ms ease-out;
}
.announce-tight { margin-bottom: 0; }
.announce:hover { border-color: var(--orange); }
.announce:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.announce .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }
.announce .go { color: var(--orange-deep); font-weight: 600; }

/* social pills (text + icon, not icon buttons) */
.social { display: inline-flex; align-items: center; gap: 8px; }
.social svg { width: 15px; height: 15px; flex: none; display: block; }

/* share — round icon buttons */
.share { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.share-label { display: block; font: 500 0.72rem 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 10px; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 200ms ease-out, color 200ms ease-out; }
.share-btn:hover { border-color: var(--orange); color: var(--orange-deep); }
.share-btn svg { width: 16px; height: 16px; display: block; }