/* Shared native controls. React primitives use the same data-slot contract. */
.sx-button, [data-slot="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sx-space-2);
  min-block-size: var(--sx-control-md);
  padding-inline: var(--sx-space-4);
  border: 1px solid transparent;
  border-radius: var(--sx-radius-control);
  background: var(--sx-color-brand);
  color: var(--sx-color-on-brand);
  font: 600 var(--sx-font-label)/1.5 var(--sx-font-family);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sx-motion-fast) var(--sx-ease-out), color var(--sx-motion-fast) var(--sx-ease-out), border-color var(--sx-motion-fast) var(--sx-ease-out);
}
.sx-button:hover, [data-slot="button"]:hover { background: var(--sx-color-brand-hover); }
:is(.sx-button, [data-slot="button"])[data-variant="secondary"] { border-color: var(--sx-color-border); background: var(--sx-color-raised); color: var(--sx-color-text); }
:is(.sx-button, [data-slot="button"])[data-variant="outline"] { border-color: var(--sx-color-input); background: transparent; color: var(--sx-color-text); }
:is(.sx-button, [data-slot="button"])[data-variant="ghost"] { background: transparent; color: var(--sx-color-muted); }
:is(.sx-button, [data-slot="button"]):is([data-variant="outline"], [data-variant="ghost"]):hover { background: var(--sx-color-raised); color: var(--sx-color-text); }
:is(.sx-button, [data-slot="button"])[data-variant="destructive"] { background: var(--sx-color-danger); color: var(--sx-color-on-danger); }
:is(.sx-button, [data-slot="button"])[data-size="sm"] { min-block-size: var(--sx-control-sm); padding-inline: var(--sx-space-3); }
:is(.sx-button, [data-slot="button"])[data-size="lg"] { min-block-size: var(--sx-control-lg); padding-inline: var(--sx-space-6); font-size: var(--sx-font-body); }
:is(.sx-button, [data-slot="button"])[data-size="icon"] { inline-size: var(--sx-control-md); padding: 0; }
:is(.sx-button, [data-slot="button"])[data-size="icon-sm"] { inline-size: var(--sx-control-sm); min-block-size: var(--sx-control-sm); padding: 0; }
:is(.sx-button, [data-slot="button"]):is(:disabled, [aria-disabled="true"]) { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
[data-slot="button-icon"] { display: inline-flex; flex: 0 0 auto; }
[data-slot="button-label"] { display: inline-flex; align-items: center; gap: var(--sx-space-2); }

.sx-input, [data-slot="input"], [data-slot="input-wrapper"] {
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: var(--sx-control-md);
  border: 1px solid var(--sx-color-input);
  border-radius: var(--sx-radius-control);
  background: var(--sx-color-field);
  color: var(--sx-color-text);
  font: 400 var(--sx-font-label)/1.5 var(--sx-font-family);
  transition: border-color var(--sx-motion-fast) var(--sx-ease-out), box-shadow var(--sx-motion-fast) var(--sx-ease-out);
}
.sx-input, [data-slot="input"] { padding-inline: var(--sx-space-3); }
[data-slot="input-wrapper"] { display: flex; align-items: center; gap: var(--sx-space-2); padding-inline: var(--sx-space-3); }
[data-slot="input-wrapper"] > [data-slot="input"] { min-block-size: 0; align-self: stretch; border: 0; border-radius: 0; background: transparent; padding: 0; outline: none; box-shadow: none; }
[data-slot="input-start"], [data-slot="input-end"] { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--sx-color-muted); }
:is(.sx-input, [data-slot="input"])::placeholder { color: var(--sx-color-muted); opacity: 1; }
:is(.sx-input, [data-slot="input"], [data-slot="input-wrapper"])[data-size="sm"] { min-block-size: var(--sx-control-sm); }
:is(.sx-input, [data-slot="input"], [data-slot="input-wrapper"])[data-size="lg"] { min-block-size: var(--sx-control-lg); font-size: var(--sx-font-body); }
:is(.sx-input, [data-slot="input"], [data-slot="input-wrapper"]):is(:disabled, [data-disabled="true"]) { opacity: 0.55; cursor: not-allowed; }
.sx-field { display: grid; gap: var(--sx-space-2); min-inline-size: 0; }
.sx-field-label { color: var(--sx-color-text); font-size: var(--sx-font-label); font-weight: 600; }
.sx-field-message { margin: 0; color: var(--sx-color-muted); font-size: var(--sx-font-caption); line-height: 1.65; }
.sx-field-message[data-reserve="true"] { min-block-size: 1.65em; }
.sx-field[data-state="error"] .sx-field-message { color: var(--sx-color-error); }
:is(.sx-input, [data-slot="input"], [data-slot="input-wrapper"])[data-state="error"], .sx-input[aria-invalid="true"] { border-color: var(--sx-color-error); }
:is(.sx-input, [data-slot="input"], [data-slot="input-wrapper"])[data-state="success"] { border-color: var(--sx-color-success); }
.sx-check { inline-size: 1.25rem; block-size: 1.25rem; color: var(--sx-color-success); }

[data-slot="table-container"], .sx-table-container { max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--sx-color-border); border-radius: var(--sx-radius-card); }
[data-slot="table"], .sx-table { inline-size: 100%; border-collapse: collapse; color: var(--sx-color-text); font-size: var(--sx-font-label); line-height: 1.6; }
:is([data-slot="table"], .sx-table) :is(th, td) { padding: var(--sx-space-3) var(--sx-space-4); text-align: start; border-block-end: 1px solid var(--sx-color-border); vertical-align: middle; }
:is([data-slot="table"], .sx-table) th { background: var(--sx-color-raised); color: var(--sx-color-muted); font-size: var(--sx-font-caption); font-weight: 600; }
[data-slot="table"][data-size="sm"] :is(th, td) { padding-block: var(--sx-space-2); }
:is([data-slot="table"], .sx-table) tbody tr:last-child td { border-block-end: 0; }
[data-slot="table"][data-hoverable="true"] tbody tr:hover, [data-slot="table-row"][data-state="selected"] { background: var(--sx-color-raised); }
[data-slot="table-row"]:focus-within { background: var(--sx-color-raised); }
.sx-table-state { padding: var(--sx-space-8); text-align: center; color: var(--sx-color-muted); }
.sx-table-state[data-state="error"] { color: var(--sx-color-error); }

.sx-feedback { display: flex; align-items: flex-start; gap: var(--sx-space-3); padding: var(--sx-space-4); border: 1px solid var(--sx-color-border); border-radius: var(--sx-radius-card); background: var(--sx-color-surface); color: var(--sx-color-text); font-size: var(--sx-font-label); line-height: var(--sx-leading-body); }
.sx-feedback[data-tone="error"] { border-color: var(--sx-color-error); color: var(--sx-color-error); }
.sx-feedback[data-tone="success"] { border-color: var(--sx-color-success); color: var(--sx-color-success); }
.sx-feedback[data-tone="warning"] { border-color: var(--sx-color-warning); color: var(--sx-color-warning); }
.sx-empty { display: grid; justify-items: center; gap: var(--sx-space-3); padding: var(--sx-space-8); text-align: center; color: var(--sx-color-muted); }
.sx-empty strong { color: var(--sx-color-text); font-size: var(--sx-font-body); }
.sx-empty p { max-inline-size: 42rem; margin: 0; line-height: var(--sx-leading-body); }
.sx-skeleton { display: block; border-radius: var(--sx-radius-control); background: var(--sx-color-raised); animation: sx-pulse 1.8s var(--sx-ease-in-out) infinite; }
.sx-spinner { display: inline-block; inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: sx-spin 800ms linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-pulse { 50% { opacity: 0.5; } }

:is(.sx-button, .sx-input, [data-slot="button"], [data-slot="input"]):focus-visible, [data-slot="input-wrapper"]:focus-within {
  outline: 2px solid var(--sx-color-focus);
  outline-offset: 3px;
}
[data-slot="input-wrapper"] > [data-slot="input"]:focus-visible { outline: none; }
@media (pointer: coarse) {
  :root { --sx-control-sm: 2.75rem; }
  :is(.sx-input, [data-slot="input"], [data-slot="input-wrapper"]) { font-size: max(1rem, 1em); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-skeleton, .sx-spinner { animation: none; }
  .sx-spinner { border-inline-end-color: currentColor; opacity: 0.6; }
}