/* 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-small: 128px;
  --heyvn-button-width-medium: 168px;
  --heyvn-button-width-large: 248px;
  --heyvn-button-width-xlarge: 336px;
  --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: max-content;
  min-inline-size: min(var(--heyvn-button-width),100%);
  max-inline-size: 100%;
  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: nowrap;
  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: normal;
  white-space: nowrap;
}
.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 0 auto; max-inline-size: 100%; min-inline-size: min(var(--heyvn-button-width),100%); }
.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-small: 120px; --heyvn-button-width-medium: 140px; --heyvn-button-width-large: 240px; --heyvn-button-width-xlarge: 320px; --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: 48px minmax(0,1fr) auto; gap: 8px; }
  .join-step-count { font-size: .75rem; }
}

/* Intentional layout variants use the same primitive and compartment, with a shared width token. */
body .hero-registration.heyvn-button { --heyvn-button-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 42rem; }
body .hero-registration.heyvn-button > .hero-registration-copy { white-space: normal; 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: var(--heyvn-button-width-xlarge); }
.join-referral-actions .heyvn-button { min-block-size: 48px; }

.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; } }

/* One closed size scale. Widths are minimum tracks; translations may grow naturally.
   Explicit small/medium/large/xlarge classes also work for native legacy controls. */
body .heyvn-button.heyvn-button--small { --heyvn-button-width: var(--heyvn-button-width-small); }
body .heyvn-button.heyvn-button--medium { --heyvn-button-width: var(--heyvn-button-width-medium); }
body .heyvn-button.heyvn-button--large { --heyvn-button-width: var(--heyvn-button-width-large); }
body .heyvn-button.heyvn-button--xlarge { --heyvn-button-width: var(--heyvn-button-width-xlarge); }
body .heyvn-button.heyvn-button--icon { inline-size: var(--heyvn-button-height); min-inline-size: var(--heyvn-button-height); block-size: var(--heyvn-button-height); }
body .heyvn-button.heyvn-button--icon > .heyvn-button-icon { flex: 1; border: 0; }
body .heyvn-button.heyvn-button--icon > .heyvn-button-label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
/* Compact layouts stack long actions instead of squeezing their labels. */
@media (max-width: 620px) {
  .join-referral-actions { display: flex; }
  .join-referral-actions .heyvn-button { flex: 1 0 auto; inline-size: max-content; min-inline-size: min(var(--heyvn-button-width),100%); }
}

@media (max-width:480px) {
  /* The back action keeps its accessible label; compact chrome leaves room for the primary action. */
  body .heyvn-button.join-step-back { inline-size: 48px; min-inline-size: 48px; block-size: 48px; }
  body .heyvn-button.join-step-back > .heyvn-button-icon { flex: 1; border: 0; }
  body .heyvn-button.join-step-back > .heyvn-button-label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .join-step-footer-inner.join-edit-footer { grid-template-columns: 48px minmax(0,1fr); }
}
@media (max-width:380px) {
  .join-step-footer-inner:not(.join-edit-footer) { grid-template-columns: 48px minmax(0,1fr); }
  .join-step-footer-inner:not(.join-edit-footer) .join-step-count { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .join-step-footer-inner:not(.join-edit-footer) .join-step-back { grid-column: 1; grid-row: 2; }
  .join-step-footer-inner:not(.join-edit-footer) .join-step-forward { grid-column: 2; grid-row: 2; }
  .has-step-footer { padding-block-end: calc(112px + env(safe-area-inset-bottom)); }
}

/* Equal-width peer actions share their longest label; native links and buttons keep one geometry. */
.heyvn-button-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;max-inline-size:100%}
body .heyvn-button-group>.heyvn-button{inline-size:100%}
@media(max-width:520px){.heyvn-button-group{inline-size:100%;grid-auto-flow:row;grid-auto-columns:100%}}

.join-step-footer-inner:not(.join-edit-footer)>.heyvn-button.join-step-forward{min-inline-size:var(--heyvn-button-width);inline-size:max-content}

/* Long review labels keep progress on a separate row without widening the action. */
@media(max-width:520px){
  .join-step-footer-inner:not(.join-edit-footer):has(.heyvn-button--large){grid-template-columns:48px minmax(0,1fr)}
  .join-step-footer-inner:not(.join-edit-footer):has(.heyvn-button--large) .join-step-count{grid-column:1 / -1;grid-row:1;justify-self:center}
  .join-step-footer-inner:not(.join-edit-footer):has(.heyvn-button--large) .join-step-back{grid-column:1;grid-row:2}
  .join-step-footer-inner:not(.join-edit-footer):has(.heyvn-button--large) .join-step-forward{grid-column:2;grid-row:2}
  .has-step-footer:has(.join-step-footer .heyvn-button--large){padding-block-end:calc(112px + env(safe-area-inset-bottom))}
}