/* Tacet marketing actions. Swage's layered elevation, with Tacet's own palette.
   Explicit enrollment keeps app controls and generated Swage actions independent. */
.tacet-button {
  --tacet-button-surface: var(--foreground);
  --tacet-button-ink: var(--background);
  --tacet-button-edge: transparent;
  --tacet-button-hover-surface: var(--org-on-light);
  --tacet-button-hover-ink: var(--beige-50);
  --tacet-button-depth:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 1px 2px color-mix(in oklch, var(--ink-deep) 14%, transparent),
    0 6px 16px color-mix(in oklch, var(--ink-deep) 10%, transparent);
  --tacet-button-hover-depth:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 2px 4px color-mix(in oklch, var(--ink-deep) 16%, transparent),
    0 10px 20px color-mix(in oklch, var(--ink-deep) 14%, transparent);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 3.25rem;
  max-width: 100%;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--tacet-button-edge);
  border-radius: var(--radius-lg);
  background: var(--tacet-button-surface);
  color: var(--tacet-button-ink);
  box-shadow: var(--tacet-button-depth);
  font-family: Supreme, system-ui, sans-serif;
  font-size: var(--fs-btn);
  font-weight: 600;
  font-style: normal;
  font-variation-settings: normal;
  line-height: 1.4286;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-decelerate);
}
.tacet-button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: var(--tacet-button-hover-surface);
  clip-path: inset(0 100% 0 0 round var(--radius-lg));
  transition: clip-path var(--duration-fast) var(--ease-decelerate);
  pointer-events: none;
}
html.dark .tacet-button--primary {
  --tacet-button-hover-ink: var(--ink-deep);
}
.tacet-button--secondary {
  --tacet-button-surface: var(--surface-container);
  --tacet-button-ink: var(--foreground);
  --tacet-button-edge: var(--border);
  --tacet-button-hover-surface: var(--background);
  --tacet-button-hover-ink: var(--foreground);
}
html.dark .tacet-button--secondary {
  --tacet-button-surface: var(--background);
  --tacet-button-hover-surface: var(--surface-container);
}
/* Keep the same elevation geometry; dark surfaces need more shadow opacity. */
html.dark .tacet-button:where(:not(.tacet-button--ghost)) {
  --tacet-button-depth:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 1px 2px color-mix(in oklch, var(--ink-deep) 32%, transparent),
    0 6px 16px color-mix(in oklch, var(--ink-deep) 24%, transparent);
  --tacet-button-hover-depth:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 2px 4px color-mix(in oklch, var(--ink-deep) 40%, transparent),
    0 10px 20px color-mix(in oklch, var(--ink-deep) 32%, transparent);
}
.tacet-button--ghost {
  --tacet-button-surface: transparent;
  --tacet-button-ink: var(--foreground);
  --tacet-button-hover-ink: var(--org-on-light);
  --tacet-button-depth: none;
  --tacet-button-hover-depth: none;
  padding-inline: var(--space-2);
}
.tacet-button--ghost::before {
  content: none;
}
.tacet-button--ghost .tacet-button__label {
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-1);
  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}
.tacet-button__label {
  min-width: 0;
}
.tacet-button .tacet-button__icon {
  --tacet-icon-rest: none;
  --tacet-icon-active: translateX(var(--space-1)) rotate(45deg);
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  color: inherit;
  overflow: visible;
  transform-origin: center;
  transform: var(--tacet-icon-rest);
  transition: transform var(--duration-fast) var(--ease-decelerate);
}
.tacet-button .icon-tabler-arrow-down {
  --tacet-icon-rest: rotate(-90deg);
  --tacet-icon-active: rotate(0deg);
}
.tacet-button .icon-tabler-copy {
  --tacet-icon-active: none;
}
.tacet-button .icon-tabler-copy path {
  transform: none;
  transition: transform var(--duration-fast) var(--ease-decelerate);
}
.tacet-button .tacet-button__copy-front {
  --tacet-copy-active: translate(var(--space-1), var(--space-1));
}
.tacet-button .tacet-button__copy-back {
  --tacet-copy-active: translate(calc(-1 * var(--space-1)), calc(-1 * var(--space-1)));
}
.tacet-button--block {
  width: 100%;
}
.tacet-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: var(--space-1);
  box-shadow: var(--tacet-button-hover-depth);
}
@media (hover: hover) and (pointer: fine) {
  .tacet-button:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover {
    color: var(--tacet-button-hover-ink);
    box-shadow: var(--tacet-button-hover-depth);
    transform: translateY(-2px);
    text-decoration: none;
  }
  .tacet-button:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover::before {
    clip-path: inset(0 0 0 0 round var(--radius-lg));
  }
  .tacet-button:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover
    .tacet-button__icon {
    transform: var(--tacet-icon-active);
    transition-duration: var(--duration-normal);
  }
  .tacet-button:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover
    .icon-tabler-copy
    path {
    transform: var(--tacet-copy-active);
    transition-duration: var(--duration-normal);
  }
  .tacet-button--ghost:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover {
    transform: none;
  }
}
.tacet-button:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):focus-visible
  .tacet-button__icon {
  transform: var(--tacet-icon-active);
  transition-duration: var(--duration-normal);
}
.tacet-button:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):focus-visible
  .icon-tabler-copy
  path {
  transform: var(--tacet-copy-active);
  transition-duration: var(--duration-normal);
}
.tacet-button--ghost:is(:hover, :focus-visible) .tacet-button__label {
  text-decoration-color: currentColor;
}
.tacet-button:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 12%);
  transition-duration: 70ms;
}
.tacet-button--ghost:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):active {
  box-shadow: none;
}
.tacet-button:is(:disabled, [aria-disabled='true'], [aria-busy='true']) {
  opacity: 0.52;
  box-shadow: none;
  cursor: not-allowed;
}
.tacet-button[aria-busy='true'] {
  cursor: progress;
}
.tacet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
@media (max-width: 40rem) {
  .tacet-actions > .tacet-button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tacet-button,
  .tacet-button::before,
  .tacet-button .tacet-button__icon,
  .tacet-button .icon-tabler-copy path,
  .tacet-button .tacet-button__label {
    transition: none;
  }
  .tacet-button:is(:hover, :focus-visible, :active),
  .tacet-button .tacet-button__icon,
  .tacet-button:is(:hover, :focus-visible, :active) .tacet-button__icon,
  .tacet-button:is(:hover, :focus-visible, :active) .icon-tabler-copy path {
    transform: none;
  }
}
@media (hover: none) {
  .tacet-button .icon-tabler-arrow-down {
    --tacet-icon-rest: none;
  }
}
@media (forced-colors: active) {
  .tacet-button {
    border-color: ButtonText;
  }
  .tacet-button::before {
    content: none;
  }
}