/* Buttons (Guidelines §10): pill, Bricolage 800, 44 px tall at least.
   One primary (ink) per screen. Marigold (.btn-accent) only for the single most important
   creation action. Destructive actions are quiet text (.btn-quiet), never a red block. */
.btn {
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 800;
  --bs-btn-font-size: 16px;
  --bs-btn-line-height: 1.2;
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 11px;
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-border-width: 1.5px;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 1;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -.01em; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(.97); }
.btn .icon { width: 18px; height: 18px; vertical-align: 0; }
.btn .cmu-mark { width: 20px; height: 20px; }
.btn-lg { --bs-btn-padding-y: 14px; --bs-btn-padding-x: 26px; --bs-btn-font-size: 17px; min-height: 52px; }
.btn-sm { --bs-btn-padding-y: 6px; --bs-btn-padding-x: 14px; --bs-btn-font-size: 14px; min-height: 36px; }

.btn-primary {
  --bs-btn-bg: var(--cmu-ink); --bs-btn-color: var(--cmu-paper); --bs-btn-border-color: var(--cmu-ink);
  --bs-btn-hover-bg: #2C2640; --bs-btn-hover-color: var(--cmu-paper); --bs-btn-hover-border-color: #2C2640;
  --bs-btn-active-bg: #000; --bs-btn-active-color: var(--cmu-paper); --bs-btn-active-border-color: #000;
  --bs-btn-disabled-bg: var(--line); --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--line);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--cmu-paper); --bs-btn-color: var(--cmu-ink); --bs-btn-border-color: var(--cmu-paper);
  --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-color: var(--cmu-ink); --bs-btn-hover-border-color: #FFFFFF;
  --bs-btn-active-bg: #E2DEEA; --bs-btn-active-color: var(--cmu-ink); --bs-btn-active-border-color: #E2DEEA;
}
.btn-accent {
  --bs-btn-bg: var(--cmu-marigold); --bs-btn-color: var(--cmu-ink); --bs-btn-border-color: var(--cmu-marigold);
  --bs-btn-hover-bg: #FFBE45; --bs-btn-hover-color: var(--cmu-ink); --bs-btn-hover-border-color: #FFBE45;
  --bs-btn-active-bg: #F2A200; --bs-btn-active-color: var(--cmu-ink); --bs-btn-active-border-color: #F2A200;
  --bs-btn-disabled-bg: var(--line); --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--line);
}
.btn-secondary, .btn-outline {
  --bs-btn-bg: transparent; --bs-btn-color: var(--text); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: var(--tint); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--line-strong);
  --bs-btn-active-bg: var(--tint); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--text);
  --bs-btn-disabled-bg: transparent; --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--line);
}
.btn-ghost {
  --bs-btn-bg: var(--tint); --bs-btn-color: var(--text); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--line); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--line); --bs-btn-active-color: var(--text);
}
.btn-quiet {
  --bs-btn-bg: transparent; --bs-btn-color: var(--error); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--error); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--error);
  --bs-btn-padding-x: 8px; text-decoration: underline; text-underline-offset: 3px;
}
.btn-link { --bs-btn-color: var(--text); --bs-btn-hover-color: var(--text); --bs-btn-font-family: var(--font-body);
  --bs-btn-font-weight: 600; text-underline-offset: 3px; }
/* Round icon button (share, close, back): 44 × 44. */
.btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 44px; height: 44px; min-height: 44px; }
.btn-icon .icon { width: 20px; height: 20px; }
/* Pressed toggles (Maybe) keep their label and fill their icon. */
.btn[aria-pressed="true"].btn-secondary { --bs-btn-bg: var(--cmu-marigold-light); --bs-btn-color: var(--cmu-ink);
  --bs-btn-border-color: var(--cmu-marigold); --bs-btn-hover-bg: var(--cmu-marigold-light); --bs-btn-hover-color: var(--cmu-ink); }

/* The join moment (§9): after "Circle me up", the marigold dot slides into the gap. */
.btn .cmu-mark .mark-dot { transform-origin: 74px 26px; }
.is-joining .cmu-mark .mark-dot { animation: cmu-join var(--dur-slow) var(--ease-join) both; }
@keyframes cmu-join { from { transform: translate(18px, -18px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Segmented choice (Going / Going solo, quick status): one tap saves; the pressed one is filled. */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--tint); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--cmu-ink); color: var(--cmu-paper); }
[data-bs-theme="dark"] .seg button[aria-pressed="true"] { background: var(--cmu-paper); color: var(--cmu-ink); }
.seg button:active { transform: scale(.97); }