/* Adapted from Arc UI (MIT). Source and modifications: README.md. */
/* Press scale is driven by Motion (whileTap) alone, so transform never gets a CSS transition here. */
.arc-button { position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-4); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.arc-button:disabled { cursor: not-allowed; opacity: .52; }
.arc-button[aria-busy="true"] { cursor: progress; }
/* Anchors of floating layers never scale: Radix opens on pointerdown and would measure a shrunken trigger. */
.arc-button:is([aria-haspopup]:not([aria-haspopup="false"]), [data-state], [role="combobox"]) { transform: none !important; }
/* The slot's width follows the incoming label on a spring. The label stays centered and may overflow evenly while the slot catches up;
   the outgoing label pops out of flow against the slot itself, so it keeps its place instead of following the new content box. */
.arc-label-slot { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; transition: opacity var(--duration-fast) var(--ease-standard); }
.arc-label-slot[data-morphing] { clip-path: inset(-50% calc(var(--space-3) * -1)); }
.arc-label-content { display: inline-flex; flex: none; align-items: center; }
.arc-label-phase { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; }
.arc-label-phase svg { flex: none; }
.arc-primary { color: var(--background); background: var(--foreground); border-color: var(--foreground); }
.arc-secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); }
.arc-ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }
.arc-danger { color: var(--danger); background: var(--surface); border-color: var(--border); }
@media (hover: hover) and (pointer: fine) {
  .arc-primary:hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); }
  .arc-secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
  .arc-ghost:hover:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
  .arc-danger:hover:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }
}
/* Color feedback on press, so touch and menu triggers (which never scale) still answer the finger. */
.arc-primary:active:not(:disabled) { opacity: .84; }
.arc-secondary:active:not(:disabled), .arc-ghost:active:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
.arc-danger:active:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }
.arc-sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); font-size: var(--text-sm); }
.arc-md { min-height: var(--control-height-md); }
.arc-lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); font-size: var(--text-sm); }
.arc-loader { position: absolute; left: 50%; top: 50%; display: grid; width: var(--space-4); height: var(--space-4); margin: calc(var(--space-4) / -2); }
.arc-spinner { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.arc-loading-label { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .arc-button { transition: none; } .arc-label-slot { transition: opacity var(--duration-instant) linear; } .arc-spinner { animation-duration: .01ms; animation-iteration-count: 1; } }

/* Width never changes: the label cell reserves its widest state while icon and letters crossfade inside it. Press releases on the spring curve. */
.arc-copy-button { display: inline-flex; width: max-content; max-width: 100%; min-height: var(--control-height-sm); align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.arc-copy-button:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-instant); transition-timing-function: var(--ease-standard); }
.arc-copy-iconOnly:active:not(:disabled) { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .arc-copy-button:hover:not(:disabled) { background: var(--surface-muted); border-color: var(--border-strong); } .arc-copy-plain:hover:not(:disabled) { border-color: transparent; background: var(--surface-muted); color: var(--foreground); } }
.arc-copy-button:disabled { cursor: not-allowed; opacity: .5; }
/* Each icon carries its own color, so the outgoing glyph never tints on its way out. */
.arc-copy-icon { position: relative; display: grid; width: 16px; height: 16px; flex: none; }
.arc-copy-iconInner { position: absolute; inset: 0; display: grid; place-items: center; }
.arc-copy-iconInner[data-state="copied"] { color: var(--success); }
.arc-copy-iconInner[data-state="error"] { color: var(--danger); }
/* The inline padding gives blurred edge letters room before the horizontal clip; the negative margin keeps the box the same size. */
.arc-copy-label { display: grid; min-width: 0; margin-inline: calc(var(--space-1) * -1); padding-inline: var(--space-1); overflow-x: clip; text-align: left; white-space: nowrap; }
.arc-copy-measure, .arc-copy-glyphs { grid-area: 1 / 1; }
.arc-copy-measure { visibility: hidden; }
.arc-copy-glyphs { position: relative; display: inline-flex; justify-self: start; white-space: pre; }
.arc-copy-glyph { display: inline-block; }
.arc-copy-iconOnly { width: var(--control-height-sm); padding: 0; }
.arc-copy-plain { border-color: transparent; background: transparent; color: var(--text-secondary); }
.arc-copy-srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .arc-copy-button { transition: none; } .arc-copy-button:active:not(:disabled) { transform: none; } }

.arc-accordion-accordion { width: 100%; border-top: 1px solid var(--border); }
.arc-accordion-item { border-bottom: 1px solid var(--border); }
.arc-accordion-header { margin: 0; }
.arc-accordion-trigger { display: flex; width: 100%; min-height: var(--control-height-lg); align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .arc-accordion-trigger:hover { color: var(--text-secondary); } .arc-accordion-trigger:hover .arc-accordion-icon { color: var(--foreground); } }
/* Rotation is driven by a spring in accordion.arc-accordion-tsx; CSS only handles color. */
.arc-accordion-icon { display: inline-flex; flex: 0 0 auto; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
.arc-accordion-trigger[data-state="open"] .arc-accordion-icon { color: var(--foreground); }
.arc-accordion-panel { overflow: hidden; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
.arc-accordion-panelInner { overflow-wrap: anywhere; padding: 0 var(--space-8) var(--space-5) 0; }
.arc-accordion-lg .arc-accordion-trigger { min-height: 76px; gap: var(--space-8); padding-block: var(--space-5); font-size: var(--text-lg); letter-spacing: var(--tracking-body); }
.arc-accordion-lg .arc-accordion-panel { font-size: var(--text-base); line-height: 1.65; }
.arc-accordion-lg .arc-accordion-panelInner { max-width: 62ch; padding: 0 var(--space-12) var(--space-6) 0; }
@media (max-width: 520px) { .arc-accordion-lg .arc-accordion-trigger { min-height: 68px; font-size: var(--text-base); } .arc-accordion-lg .arc-accordion-panel { font-size: var(--text-sm); } .arc-accordion-lg .arc-accordion-panelInner { padding-right: var(--space-6); } }
@media (prefers-reduced-motion: reduce) { .arc-accordion-trigger, .arc-accordion-icon { transition: none; } }