/* Sextant components — every value is a token from tokens.css. Prefix: sx-. */

/* ---------- density + pointer hooks (component-scoped custom properties) ---------- */
:root { --sx-control: var(--control-md); --sx-row: var(--row-default); --sx-pad: var(--space-3); }
[data-density="compact"] { --sx-control: var(--control-sm); --sx-row: var(--row-compact); --sx-pad: var(--space-2); }
[data-density="spacious"] { --sx-control: var(--control-lg); --sx-row: var(--row-spacious); --sx-pad: var(--space-4); }
@media (pointer: coarse) { :root, [data-density] { --sx-control: var(--control-xl); --sx-row: var(--row-spacious); } }

:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; font-family: var(--font-sans); font-size: 13px; line-height: 20px; background: var(--surface-default); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.sx-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sx-icon { flex: none; display: block; }
.sx-spin { animation: sx-rotate 800ms linear infinite; }
@keyframes sx-rotate { to { transform: rotate(360deg); } }
.sx-spinner { display: inline-flex; color: currentColor; }

/* one focus treatment for everything interactive */
:where(.sx-btn, .sx-input input, .sx-textarea, .sx-select select, .sx-switch, .sx-tab, .sx-nav-item, .sx-link, .sx-crumb, .sx-th-sort, .sx-input-clear, .sx-table-wrap, .sx-tabpanel, .sx-card.is-interactive, .sx-menu-item):focus-visible {
  outline: var(--border-thick) solid var(--border-focus); outline-offset: var(--space-half);
}
:where(.sx-input input, .sx-select select):focus-visible { outline: none; }
.sx-input:focus-within, .sx-select:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }

/* ---------- Kbd ---------- */
.sx-kbd-group { display: inline-flex; gap: var(--space-half); flex: none; }
.sx-kbd { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; min-width: 18px; height: 18px; padding: 0 var(--space-1); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--kbd-bg); color: var(--kbd-text); border: var(--border-hairline) solid var(--border-default); }

/* ---------- Button ---------- */
.sx-btn { --_h: var(--sx-control); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--_h); min-width: var(--target-min); padding: 0 var(--space-3); box-sizing: border-box; border-radius: var(--radius-md); border: var(--border-hairline) solid transparent; font: 500 13px/20px var(--font-sans); white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.sx-btn-sm { --_h: var(--control-sm); padding: 0 var(--space-2); gap: var(--space-1); font-size: 12px; }
.sx-btn-lg { --_h: var(--control-lg); padding: 0 var(--space-4); }
.sx-btn-full { width: 100%; }
.sx-btn-label { overflow: hidden; text-overflow: ellipsis; }
.sx-btn-primary { background: var(--accent); color: var(--text-on-accent); }
.sx-btn-primary:hover { background: var(--accent-hover); }
.sx-btn-primary:active { background: var(--accent-active); }
.sx-btn-secondary { background: var(--button-secondary-bg); color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.sx-btn-secondary:hover { border-color: var(--border-strong); background: var(--button-secondary-bg); background-image: linear-gradient(var(--surface-hover), var(--surface-hover)); }
.sx-btn-secondary:active { background-image: linear-gradient(var(--surface-active), var(--surface-active)); }
.sx-btn-ghost { background: transparent; color: var(--text-secondary); }
.sx-btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.sx-btn-ghost:active, .sx-btn-ghost[aria-expanded="true"] { background: var(--surface-active); color: var(--text-primary); }
.sx-btn-danger { background: var(--danger-solid); color: var(--text-on-danger); }
.sx-btn-danger:hover { background: var(--danger-hover); }
.sx-btn:disabled, .sx-btn[aria-disabled="true"]:not(.is-loading) { background: var(--surface-disabled); color: var(--text-disabled); border-color: var(--border-subtle); box-shadow: none; cursor: not-allowed; background-image: none; }
.sx-btn-ghost:disabled { background: transparent; border-color: transparent; }
.sx-btn.is-loading { cursor: progress; }
.sx-btn-kbd { margin-left: var(--space-1); margin-right: calc(var(--space-1) * -1); }
.sx-btn-primary .sx-kbd { background: transparent; color: var(--text-on-accent); border-color: var(--text-on-accent); }
.sx-iconbtn { width: var(--_h); padding: 0; }
.sx-iconbtn.sx-btn-sm { width: var(--target-min); height: var(--target-min); }
.sx-btn-group { display: inline-flex; gap: var(--space-2); }
.sx-btn-group.is-attached { gap: 0; }
.sx-btn-group.is-attached > .sx-btn:not(:first-child), .sx-btn-group.is-attached > .sx-tooltip-anchor:not(:first-child) > .sx-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.sx-btn-group.is-attached > .sx-btn:not(:last-child), .sx-btn-group.is-attached > .sx-tooltip-anchor:not(:last-child) > .sx-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sx-btn-group.is-attached > .sx-btn-primary + .sx-btn-primary, .sx-btn-group.is-attached > .sx-btn-primary + .sx-tooltip-anchor > .sx-btn-primary { box-shadow: inset 1px 0 0 var(--accent-active); }

/* ---------- Link ---------- */
.sx-link { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); border-radius: var(--radius-sm); }
.sx-link:hover { text-decoration-color: currentColor; }
.sx-link-standalone { text-decoration: none; font-weight: 500; }
.sx-link-standalone:hover { text-decoration: underline; }
.sx-link-ext { display: inline-block; margin-left: var(--space-half); vertical-align: -1px; }

/* ---------- Field ---------- */
.sx-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sx-field-label { font: 500 13px/20px var(--font-sans); color: var(--text-primary); padding: 0; }
.sx-field-req { color: var(--danger-text); }
.sx-field-opt { color: var(--text-tertiary); font-weight: 400; }
.sx-field-desc { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-tertiary); }
.sx-field-error { margin: 0; display: flex; gap: var(--space-1); align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--danger-text); }
.sx-field-error .sx-icon { margin-top: 1px; }

/* ---------- Input / Select / Textarea ---------- */
.sx-input, .sx-select { --_h: var(--sx-control); position: relative; display: flex; align-items: center; gap: var(--space-2); height: var(--_h); padding: 0 var(--space-2) 0 var(--space-3); box-sizing: border-box; background: var(--control-bg); border: var(--border-hairline) solid var(--border-control); border-radius: var(--radius-md); color: var(--text-primary); transition: border-color var(--duration-fast) var(--ease-standard); min-width: 0; }
.sx-input-sm { --_h: var(--control-sm); }
.sx-input-lg { --_h: var(--control-lg); }
.sx-input:hover:not(.is-disabled):not(:focus-within), .sx-select:hover:not(.is-disabled):not(:focus-within) { border-color: var(--border-control-hover); }
.sx-input input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: 400 13px/20px var(--font-sans); }
.sx-input input::placeholder, .sx-textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
.sx-input input::-webkit-search-cancel-button { display: none; }
.sx-input-icon { display: flex; color: var(--text-tertiary); margin-left: calc(var(--space-1) * -1); }
.sx-input-trailing { display: flex; align-items: center; gap: var(--space-1); color: var(--text-tertiary); }
.sx-input-clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; }
.sx-input-clear:hover { background: var(--surface-hover); color: var(--text-primary); }
.sx-input.is-invalid, .sx-select.is-invalid, .sx-textarea.is-invalid { border-color: var(--danger-solid); }
.sx-input.is-invalid:focus-within, .sx-select.is-invalid:focus-within { box-shadow: 0 0 0 1px var(--danger-solid); border-color: var(--danger-solid); }
.sx-input.is-disabled, .sx-select.is-disabled, .sx-textarea:disabled { background: var(--surface-disabled); border-color: var(--border-subtle); color: var(--text-disabled); cursor: not-allowed; }
.sx-input.is-disabled input { cursor: not-allowed; }
.sx-input.is-readonly { background: var(--surface-subtle); border-color: var(--border-default); }
.sx-select { padding: 0; }
.sx-select select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; border: 0; background: transparent; color: inherit; font: 400 13px/20px var(--font-sans); padding: 0 calc(var(--space-3) + 16px + var(--space-1)) 0 var(--space-3); cursor: pointer; border-radius: inherit; }
.sx-select select:disabled { cursor: not-allowed; }
.sx-select-chevron { position: absolute; right: var(--space-2); pointer-events: none; color: var(--text-tertiary); }
.sx-select option { background: var(--surface-raised); color: var(--text-primary); }
.sx-textarea { display: block; width: 100%; box-sizing: border-box; min-height: calc(var(--control-md) * 2); padding: var(--space-1) var(--space-3); background: var(--control-bg); border: var(--border-hairline) solid var(--border-control); border-radius: var(--radius-md); color: var(--text-primary); font: 400 14px/22px var(--font-sans); resize: vertical; }
.sx-textarea:hover:not(:disabled):not(:focus) { border-color: var(--border-control-hover); }
.sx-textarea:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); }

/* ---------- Checkbox / Radio ---------- */
.sx-check, .sx-radio { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: 13px; line-height: 20px; color: var(--text-primary); min-height: var(--target-min); }
.sx-check-box, .sx-radio-dot { position: relative; flex: none; width: 16px; height: 16px; margin-top: 2px; box-sizing: border-box; border: var(--border-hairline) solid var(--border-control); background: var(--control-bg); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.sx-check-box { border-radius: var(--radius-sm); }
.sx-radio-dot { border-radius: var(--radius-full); }
.sx-check-box input, .sx-radio-dot input { position: absolute; inset: -5px; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: inherit; }
.sx-check:hover .sx-check-box, .sx-radio:hover .sx-radio-dot { border-color: var(--border-control-hover); }
.sx-check-glyph { position: absolute; inset: -1px; width: 16px; height: 16px; fill: none; stroke: var(--text-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-check-tick, .sx-check-dash { opacity: 0; }
.sx-check-box:has(input:checked), .sx-check-box:has(input:indeterminate) { background: var(--accent); border-color: var(--accent); }
.sx-check-box:has(input:checked:not(:indeterminate)) .sx-check-tick { opacity: 1; }
.sx-check-box:has(input:indeterminate) .sx-check-dash { opacity: 1; }
.sx-radio-dot:has(input:checked) { border-color: var(--accent); border-width: 5px; background: var(--switch-thumb); }
.sx-check-box:has(input:focus-visible), .sx-radio-dot:has(input:focus-visible) { outline: var(--border-thick) solid var(--border-focus); outline-offset: var(--space-half); }
.sx-check-box:has(input[aria-invalid="true"]) { border-color: var(--danger-solid); }
.sx-check-text { display: flex; flex-direction: column; min-width: 0; }
.sx-check-label { font-weight: 400; }
.sx-check-desc { font-size: 12px; line-height: 16px; color: var(--text-tertiary); }
.sx-check.is-disabled, .sx-radio.is-disabled, .sx-radio-group:disabled .sx-radio { cursor: not-allowed; color: var(--text-disabled); }
.sx-check.is-disabled .sx-check-box, .sx-radio.is-disabled .sx-radio-dot, .sx-radio-group:disabled .sx-radio-dot { background: var(--surface-disabled); border-color: var(--border-default); }
.sx-check.is-disabled .sx-check-box:has(input:checked) { background: var(--text-disabled); border-color: var(--text-disabled); }
.sx-radio-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sx-radio-group > legend { margin-bottom: var(--space-1); }
.sx-radio-group.is-horizontal { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-4); }
.sx-radio-group.is-horizontal > legend { width: 100%; }

/* ---------- Switch ---------- */
.sx-switch { position: relative; flex: none; width: 32px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--switch-track-off); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.sx-switch::before { content: ""; position: absolute; inset: -3px; } /* 24px target */
.sx-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--switch-thumb); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-standard); }
.sx-switch[aria-checked="true"] { background: var(--accent); }
.sx-switch[aria-checked="true"] .sx-switch-thumb { transform: translateX(14px); }
.sx-switch:hover:not(:disabled) { background: var(--border-control-hover); }
.sx-switch[aria-checked="true"]:hover:not(:disabled) { background: var(--accent-hover); }
.sx-switch:disabled { background: var(--surface-disabled); box-shadow: inset 0 0 0 1px var(--border-default); cursor: not-allowed; }
.sx-switch:disabled .sx-switch-thumb { background: var(--border-strong); box-shadow: none; }
.sx-switch-sm { width: 26px; height: 14px; }
.sx-switch-sm .sx-switch-thumb { width: 10px; height: 10px; }
.sx-switch-sm[aria-checked="true"] .sx-switch-thumb { transform: translateX(12px); }
.sx-switch-sm::before { inset: -5px -1px; }
.sx-switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.sx-switch-row .sx-switch { margin-top: 1px; }
.sx-switch-row.is-disabled .sx-check-label { color: var(--text-disabled); }

/* ---------- Tooltip ---------- */
.sx-tooltip-anchor { position: relative; display: inline-flex; }
.sx-tooltip { position: absolute; z-index: var(--z-tooltip); left: 50%; bottom: calc(100% + var(--space-1)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-2); max-width: 240px; width: max-content; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--tooltip-bg); color: var(--tooltip-text); font: 500 12px/16px var(--font-sans); box-shadow: var(--shadow-md); pointer-events: none; animation: sx-fade var(--duration-standard) var(--ease-enter); }
.sx-tooltip-bottom { bottom: auto; top: calc(100% + var(--space-1)); }
.sx-tooltip .sx-kbd { background: transparent; color: var(--tooltip-text); border-color: color-mix(in srgb, var(--tooltip-text) 35%, transparent); }
@keyframes sx-fade { from { opacity: 0; } }

/* ---------- Sidebar / Nav ---------- */
.sx-sidebar { display: flex; flex-direction: column; width: var(--sidebar-width); height: 100%; box-sizing: border-box; background: var(--surface-base); color: var(--text-secondary); padding: var(--space-2); gap: var(--space-2); }
.sx-sidebar.is-collapsed { width: var(--sidebar-width-collapsed); }
.sx-sidebar.is-collapsed .sx-nav-label, .sx-sidebar.is-collapsed .sx-nav-count, .sx-sidebar.is-collapsed .sx-nav-group-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sx-sidebar-header { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg); padding: 0 var(--space-1); }
.sx-sidebar-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.sx-sidebar-footer { border-top: var(--border-hairline) solid var(--border-subtle); padding-top: var(--space-2); }
.sx-nav-group-label { padding: 0 var(--space-2); margin-bottom: var(--space-1); font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--text-tertiary); }
.sx-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sx-nav-item { display: flex; align-items: center; gap: var(--space-2); height: var(--sx-control); padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font: 500 13px/20px var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.sx-nav-item .sx-icon { color: var(--text-tertiary); }
.sx-nav-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.sx-nav-item.is-active { background: var(--nav-item-active-bg); color: var(--text-primary); }
.sx-nav-item.is-active .sx-icon { color: var(--text-primary); }
.sx-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-nav-count { font: 500 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-tertiary); }

/* ---------- Tabs ---------- */
.sx-tablist { display: flex; gap: var(--space-4); border-bottom: var(--border-hairline) solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
.sx-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-lg); padding: 0; margin-bottom: -1px; border: 0; background: none; color: var(--text-secondary); font: 500 13px/20px var(--font-sans); white-space: nowrap; cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.sx-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--border-thick); background: transparent; border-radius: var(--radius-full); transition: background-color var(--duration-standard) var(--ease-standard); }
.sx-tab:hover { color: var(--text-primary); }
.sx-tab.is-selected { color: var(--text-primary); }
.sx-tab.is-selected::after { background: var(--text-primary); }
.sx-tab:disabled { color: var(--text-disabled); cursor: not-allowed; }
.sx-tab-count { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.sx-tabpanel { padding-top: var(--space-4); border-radius: var(--radius-sm); }

/* ---------- Breadcrumbs ---------- */
.sx-breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font: 500 13px/20px var(--font-sans); }
.sx-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.sx-crumb { color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.sx-crumb:hover { color: var(--text-primary); background: var(--surface-hover); }
.sx-crumb-current { color: var(--text-primary); padding: 0 var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
.sx-crumb-sep { color: var(--text-tertiary); }

/* ---------- Command menu ---------- */
.sx-cmd { display: flex; flex-direction: column; width: 100%; max-width: var(--dialog-lg); max-height: 440px; background: var(--surface-raised); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; color: var(--text-primary); }
.sx-cmd-search { display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-4); border-bottom: var(--border-hairline) solid var(--border-subtle); color: var(--text-tertiary); }
.sx-cmd-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font: 400 14px/22px var(--font-sans); outline: none; }
.sx-cmd-search input::placeholder { color: var(--text-tertiary); }
.sx-cmd-list { flex: 1; overflow-y: auto; padding: var(--space-1) var(--space-2) var(--space-2); }
.sx-cmd-heading { padding: var(--space-2) var(--space-2) var(--space-1); font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; color: var(--text-tertiary); }
.sx-cmd-item { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; font-size: 13px; }
.sx-cmd-item.is-active { background: var(--surface-selected); color: var(--text-primary); }
.sx-cmd-item.is-active .sx-icon { color: var(--accent-text); }
.sx-cmd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-cmd-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-tertiary); }
.sx-cmd-footer { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: var(--border-hairline) solid var(--border-subtle); color: var(--text-tertiary); font-size: 12px; line-height: 16px; }
.sx-cmd-footer span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Card ---------- */
.sx-card { background: var(--surface-default); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg); color: var(--text-primary); min-width: 0; }
.sx-card.is-interactive { cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard); }
.sx-card.is-interactive:hover { border-color: var(--border-strong); }
.sx-card.is-selected { border-color: var(--accent-border); background: var(--accent-subtle); }
.sx-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.sx-card-title { margin: 0; font: 600 14px/20px var(--font-sans); }
.sx-card-desc { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.sx-card-actions { display: flex; gap: var(--space-1); flex: none; }
.sx-card-body { padding: var(--space-3) var(--space-4); }
.sx-card-footer { padding: var(--space-3) var(--space-4); border-top: var(--border-hairline) solid var(--border-subtle); display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ---------- Badge / Status ---------- */
.sx-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 var(--space-2) 0 var(--space-1); padding-left: 6px; box-sizing: border-box; border-radius: var(--radius-sm); font: 500 12px/16px var(--font-sans); white-space: nowrap; max-width: 100%; border: var(--border-hairline) solid transparent; }
.sx-badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.sx-badge-neutral { background: var(--surface-subtle); color: var(--text-secondary); border-color: var(--border-default); }
.sx-badge-accent { background: var(--accent-subtle); color: var(--accent-text); }
.sx-badge-success { background: var(--success-subtle); color: var(--success-text); }
.sx-badge-warning { background: var(--warning-subtle); color: var(--warning-text); }
.sx-badge-danger { background: var(--danger-subtle); color: var(--danger-text); }
.sx-badge-info { background: var(--info-subtle); color: var(--info-text); }
.sx-badge-progress { background: var(--progress-subtle); color: var(--progress-text); }
.sx-badge.is-outline { background: transparent; border-color: var(--border-default); color: var(--text-secondary); }
.sx-badge.is-outline .sx-badge-dot { background: var(--_dot, currentColor); }
.sx-badge-success.is-outline { --_dot: var(--success-solid); }
.sx-badge-warning.is-outline { --_dot: var(--warning-solid); }
.sx-badge-danger.is-outline { --_dot: var(--danger-solid); }
.sx-badge-info.is-outline { --_dot: var(--info-solid); }
.sx-badge-progress.is-outline { --_dot: var(--progress-solid); }
.sx-badge-accent.is-outline { --_dot: var(--accent); }
.sx-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-tertiary); font-size: 13px; }
.sx-status-label { color: var(--text-primary); }
.sx-tone-neutral { color: var(--text-tertiary); }
.sx-tone-accent { color: var(--accent); }
.sx-tone-success { color: var(--success-solid); }
.sx-tone-warning { color: var(--warning-solid); }
.sx-tone-danger { color: var(--danger-solid); }
.sx-tone-info { color: var(--info-solid); }
.sx-tone-progress { color: var(--progress-solid); }

/* ---------- Avatar ---------- */
.sx-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--radius-full); background: var(--avatar-bg); color: var(--text-secondary); font-family: var(--font-sans); font-weight: 600; line-height: 1; user-select: none; }
.sx-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.sx-avatar-presence { position: absolute; right: -1px; bottom: -1px; width: 33%; height: 33%; min-width: 6px; min-height: 6px; border-radius: var(--radius-full); box-shadow: 0 0 0 2px var(--surface-default); background: var(--text-disabled); }
.sx-avatar-presence.is-online { background: var(--success-solid); }
.sx-avatar-presence.is-away { background: var(--warning-solid); }
.sx-avatar-group { display: inline-flex; }
.sx-avatar-group > .sx-avatar { box-shadow: 0 0 0 2px var(--surface-default); }
.sx-avatar-group > .sx-avatar + .sx-avatar { margin-left: calc(var(--space-1) * -1.5); }
.sx-avatar-more { font-size: 11px; background: var(--surface-subtle); color: var(--text-secondary); }

/* ---------- Table ---------- */
.sx-table-wrap { overflow: auto; border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); max-width: 100%; }
.sx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 20px; color: var(--text-primary); }
.sx-table th { position: sticky; top: 0; z-index: 1; height: 32px; padding: 0 var(--space-3); background: var(--table-header-bg); border-bottom: var(--border-hairline) solid var(--border-default); text-align: left; font: 500 12px/16px var(--font-sans); color: var(--text-tertiary); white-space: nowrap; }
.sx-table td { height: var(--sx-row); padding: 0 var(--space-3); border-bottom: var(--border-hairline) solid var(--border-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.sx-density-compact td { height: var(--row-compact); }
.sx-density-spacious td { height: var(--row-spacious); }
.sx-table tbody tr:last-child td { border-bottom: 0; }
.sx-table tbody tr:hover td { background: var(--surface-hover); }
.sx-table tbody tr.is-selected td { background: var(--table-row-selected); }
.sx-table tr.is-clickable { cursor: pointer; }
.sx-table .is-end { text-align: right; }
.sx-table .is-numeric { font-variant-numeric: tabular-nums; font-weight: 500; }
.sx-td-select { width: 32px; padding-right: 0 !important; }
.sx-td-select .sx-check { min-height: 0; vertical-align: middle; }
.sx-td-empty { text-align: center; color: var(--text-tertiary); height: 96px !important; }
.sx-th-sort { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.sx-th-sort:hover, .sx-th-sort.is-sorted { color: var(--text-primary); }
.is-end .sx-th-sort { flex-direction: row-reverse; }

/* ---------- Progress / Skeleton ---------- */
.sx-progress { display: flex; flex-direction: column; gap: var(--space-1); min-width: 120px; }
.sx-progress-head { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.sx-progress-value { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 500; }
.sx-progress-track { position: relative; height: 4px; border-radius: var(--radius-full); background: var(--surface-active); overflow: hidden; }
.sx-progress-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-standard) var(--ease-standard); }
.sx-progress-success { background: var(--success-solid); }
.sx-progress-warning { background: var(--warning-solid); }
.sx-progress-danger { background: var(--danger-solid); }
.is-indeterminate .sx-progress-fill { position: absolute; width: 35%; animation: sx-indet 1400ms var(--ease-standard) infinite; }
@keyframes sx-indet { from { left: -35%; } to { left: 100%; } }
.sx-skeleton { display: block; border-radius: var(--radius-sm); background: var(--skeleton-bg); animation: sx-pulse 1600ms ease-in-out infinite; }
.sx-skeleton.is-circle { border-radius: var(--radius-full); }
.sx-skeleton-lines { display: flex; flex-direction: column; gap: var(--space-2); }
@keyframes sx-pulse { 50% { opacity: .55; } }

/* ---------- Empty state ---------- */
.sx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-10) var(--space-6); max-width: 400px; margin: 0 auto; }
.sx-empty.is-compact { padding: var(--space-6) var(--space-4); }
.sx-empty-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); border: var(--border-hairline) solid var(--border-default); background: var(--surface-subtle); color: var(--text-tertiary); margin-bottom: var(--space-4); }
.sx-empty-title { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--text-primary); }
.sx-empty-desc { margin: var(--space-1) 0 0; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.sx-empty-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* ---------- Inline alert ---------- */
.sx-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: var(--border-hairline) solid; font-size: 13px; line-height: 20px; color: var(--text-primary); }
.sx-alert-icon { display: flex; margin-top: 2px; }
.sx-alert-body { flex: 1; min-width: 0; }
.sx-alert-title { margin: 0; font-weight: 600; }
.sx-alert-text { color: var(--text-secondary); }
.sx-alert-text p { margin: 0; }
.sx-alert-action { margin-top: var(--space-2); display: flex; gap: var(--space-2); }
.sx-alert-close { margin: -2px calc(var(--space-1) * -1) -2px 0; }
.sx-alert-info { background: var(--info-subtle); border-color: var(--info-border); } .sx-alert-info .sx-alert-icon { color: var(--info-solid); }
.sx-alert-success { background: var(--success-subtle); border-color: var(--success-border); } .sx-alert-success .sx-alert-icon { color: var(--success-solid); }
.sx-alert-warning { background: var(--warning-subtle); border-color: var(--warning-border); } .sx-alert-warning .sx-alert-icon { color: var(--warning-solid); }
.sx-alert-danger { background: var(--danger-subtle); border-color: var(--danger-border); } .sx-alert-danger .sx-alert-icon { color: var(--danger-solid); }
.sx-alert-neutral { background: var(--surface-subtle); border-color: var(--border-default); } .sx-alert-neutral .sx-alert-icon { color: var(--text-tertiary); }
.sx-alert .sx-alert-title + .sx-alert-text { margin-top: 0; }

/* ---------- Toast ---------- */
.sx-toast { display: flex; align-items: flex-start; gap: var(--space-3); width: 360px; max-width: calc(100vw - var(--space-8)); box-sizing: border-box; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface-raised); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--text-primary); animation: sx-toast-in var(--duration-complex) var(--ease-enter); }
.sx-toast-icon { display: flex; margin-top: 2px; }
.sx-toast-body { flex: 1; min-width: 0; }
.sx-toast-title { margin: 0; font: 500 13px/20px var(--font-sans); }
.sx-toast-desc { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.sx-toast-action { flex: none; margin-top: -2px; }
.sx-toast .sx-iconbtn { margin: -2px -4px 0 0; }
@keyframes sx-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Menu ---------- */
.sx-menu-anchor { position: relative; display: inline-flex; }
.sx-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: var(--z-dropdown); min-width: 200px; max-width: 320px; max-height: 360px; overflow-y: auto; padding: var(--space-1); box-sizing: border-box; background: var(--surface-raised); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: sx-menu-in var(--duration-standard) var(--ease-enter); transform-origin: top left; }
.sx-menu.is-end { left: auto; right: 0; transform-origin: top right; }
@keyframes sx-menu-in { from { opacity: 0; transform: scale(.97); } }
.sx-menu-item { display: flex; align-items: center; gap: var(--space-2); height: var(--sx-control); padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--text-primary); font-size: 13px; line-height: 20px; cursor: pointer; outline: none; user-select: none; }
.sx-menu-item .sx-icon { color: var(--text-tertiary); }
.sx-menu-item:hover, .sx-menu-item:focus { background: var(--surface-hover); }
.sx-menu-item:focus-visible { outline: none; background: var(--surface-active); box-shadow: inset 0 0 0 1px var(--border-focus); }
.sx-menu-item.is-danger { color: var(--danger-text); }
.sx-menu-item.is-danger .sx-icon { color: var(--danger-solid); }
.sx-menu-item[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: none; }
.sx-menu-item[aria-disabled="true"] .sx-icon { color: var(--text-disabled); }
.sx-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-menu-sep { height: 1px; margin: var(--space-1) calc(var(--space-1) * -1); background: var(--border-subtle); }
.sx-menu-heading { padding: var(--space-1) var(--space-2); font: 600 12px/16px var(--font-sans); letter-spacing: .02em; color: var(--text-tertiary); }

/* ---------- Dialog ---------- */
.sx-dialog-layer { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--space-4) var(--space-4); box-sizing: border-box; }
.sx-scrim { position: fixed; inset: 0; background: var(--overlay-scrim); animation: sx-fade var(--duration-complex) var(--ease-enter); }
.sx-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 100%; box-sizing: border-box; background: var(--surface-raised); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); color: var(--text-primary); outline: none; animation: sx-dialog-in var(--duration-complex) var(--ease-enter); }
@keyframes sx-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.sx-dialog-sm { max-width: var(--dialog-sm); }
.sx-dialog-md { max-width: var(--dialog-md); }
.sx-dialog-lg { max-width: var(--dialog-lg); }
.sx-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0 var(--space-5); }
.sx-dialog-title { margin: var(--space-half) 0 0; font: 600 16px/24px var(--font-sans); letter-spacing: -0.006em; }
.sx-dialog-desc { margin: var(--space-1) 0 0; font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.sx-dialog-body { padding: var(--space-4) var(--space-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.sx-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-hairline) solid var(--border-subtle); }
@media (max-width: 640px) {
  .sx-dialog-layer { align-items: flex-end; padding: 0; }
  .sx-dialog { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; }
  .sx-dialog-footer { flex-direction: column; }
  .sx-dialog-footer .sx-btn { width: 100%; height: var(--control-xl); }
}

/* ---------- reduced motion: movement off, meaning kept ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: var(--duration-instant) !important; transition-duration: var(--duration-instant) !important; }
  .sx-spin { animation-duration: 1600ms !important; }
  .sx-skeleton { animation: none !important; }
  .is-indeterminate .sx-progress-fill { animation: none !important; left: 0; width: 100%; opacity: .5; }
}
@media (forced-colors: active) {
  .sx-switch, .sx-check-box, .sx-radio-dot, .sx-progress-track { border: 1px solid CanvasText; }
  .sx-nav-item.is-active, .sx-cmd-item.is-active, .sx-table tr.is-selected td { outline: 2px solid Highlight; }
}