/* HEYVN canonical labeled action buttons, shared verbatim with the Public runtime.
   Geometry lives here; callers select semantics and grouping, never local icon compartments. */
:root {
  --heyvn-button-height: 48px;
  --heyvn-button-width: 168px;
  --heyvn-button-icon-width: 44px;
  --heyvn-button-radius: 10px;
  --heyvn-button-font-size: .875rem;
  --heyvn-button-label-padding: 12px;
}
body .heyvn-button.heyvn-button,
body .join-labeled-action.join-labeled-action {
  --button-fill: var(--heyvn-primary, #245bdd);
  --button-text: #fff;
  --button-line: var(--heyvn-primary, #245bdd);
  display: inline-flex;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 0;
  inline-size: var(--heyvn-button-width);
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--heyvn-button-height);
  padding: 0;
  border: 1px solid var(--button-line);
  border-radius: var(--heyvn-button-radius);
  background: var(--button-fill);
  color: var(--button-text);
  font: inherit;
  font-size: var(--heyvn-button-font-size);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
}
body .heyvn-button.heyvn-button:is(.secondary,.join-step-back,.join-ad-state-button),
.join-referral-actions .heyvn-button,
.join-ad-state-button.join-labeled-action {
  --button-fill: var(--heyvn-soft, #eaf0fe);
  --button-text: var(--heyvn-primary-dark, #1844af);
  --button-line: var(--heyvn-line, #d7e1f0);
}
body .heyvn-button.heyvn-button.danger,
.join-ad-delete .join-labeled-action {
  --button-fill: #fcf3f3;
  --button-text: #963740;
  --button-line: #ead2d2;
}
body .heyvn-button.heyvn-button > .heyvn-button-icon,
body .join-labeled-action.join-labeled-action > .join-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--heyvn-button-icon-width);
  inline-size: var(--heyvn-button-icon-width);
  min-inline-size: 0;
  align-self: stretch;
  box-sizing: border-box;
  padding: 0;
  background: #00000008;
  border: 0;
  border-inline-end: 1px solid #00000017;
}
.heyvn-button-icon svg { display: block; inline-size: 20px; block-size: 20px; flex: none; }
body .heyvn-button.heyvn-button > :not(.heyvn-button-icon),
body .join-labeled-action.join-labeled-action > span:not(.join-action-icon) {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  padding: 10px var(--heyvn-button-label-padding);
  overflow-wrap: anywhere;
}
.heyvn-button:hover, .join-labeled-action:hover { filter: brightness(.97); }
.heyvn-button:focus-visible, .join-labeled-action:focus-visible { outline: 3px solid var(--heyvn-focus, #245bdd); outline-offset: 3px; }
.heyvn-button:is(:disabled,[aria-disabled="true"]), .heyvn-button.join-step-disabled { opacity: .55; cursor: not-allowed; }
.heyvn-button[hidden], .join-labeled-action[hidden] { display: none !important; }
html[dir="rtl"] .heyvn-button-directional { transform: scaleX(-1); }
body .heyvn-button.heyvn-button::before,body .heyvn-button.heyvn-button::after { content: none; }
/* The existing working-state helpers own progress. Never grow or replace the control. */
.heyvn-button[aria-busy="true"] { cursor: progress; }
.registration-page .heyvn-button.join-loading::before { content: ""; }
/* Equal tracks stay equal when forms wrap; expanded deletion confirms occupy their own row. */
.join-ad-actions, .join-ad-public-actions .join-publication-links, .join-referral-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.join-ad-actions > :is(form,details), .join-referral-actions > .heyvn-button { flex: 0 1 var(--heyvn-button-width); min-inline-size: 0; }
.join-ad-actions > form > .heyvn-button, .join-ad-delete > summary { inline-size: 100%; }
.join-ad-actions .join-ad-delete[open] { flex-basis: 100%; }
.join-ad-actions .join-ad-delete[open] > summary { inline-size: var(--heyvn-button-width); }
.join-ad-actions .join-ad-delete[open] button { inline-size: auto; min-inline-size: min(var(--heyvn-button-width),100%); }
@media (max-width: 480px) {
  :root { --heyvn-button-width: 140px; --heyvn-button-icon-width: 36px; --heyvn-button-font-size: .8rem; --heyvn-button-label-padding: 8px; }
  .join-step-footer-inner:not(.join-edit-footer) { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; }
  .join-step-footer-inner:not(.join-edit-footer) .heyvn-button { inline-size: 100%; }
  .join-step-count { font-size: .75rem; }
}

/* Intentional layout variants use the same primitive and compartment, with a shared width token. */
.hero-registration.heyvn-button { --heyvn-button-width: 100%; max-inline-size: 42rem; }
.hero-registration .hero-registration-copy { flex-direction: column; align-items: flex-start; text-align: start; }
.hero-registration .heyvn-button-icon { flex-shrink: 0; }
.join-form .heyvn-button.join-more-button { display: inline-flex; padding: 0; }
.join-referral-actions .heyvn-button { --button-fill: var(--heyvn-soft); --button-text: var(--heyvn-primary-dark); --button-line: var(--heyvn-line); }
.join-form .heyvn-button.join-more-button > span { color: inherit; }

.join-more-button.heyvn-button { --heyvn-button-width: 300px; }
.join-referral-actions .heyvn-button { min-block-size: 48px; }
@media (max-width: 620px) {
  .join-referral-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); inline-size: 100%; }
  .join-referral-actions .heyvn-button { inline-size: 100%; block-size: 100%; }
}

.heyvn-button .join-state-spinner { animation: heyvn-button-spin .8s linear infinite; transform-origin: center; }
@keyframes heyvn-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .heyvn-button .join-state-spinner { animation: none; } }