/* Hux Studio interaction theme v119: one hover/focus language across dark and light modes. */

:root {
  /* Retain legacy token names while all controls share neutral-gray feedback. */
  --hux-interactive-inverse-surface: #303034;
  --hux-interactive-inverse-text: #f3f3f4;
  --hux-interactive-inverse-muted: #b8b8bd;
  --hux-interactive-subtle-surface: #19191a;
  --hux-interactive-subtle-text: #f2f2f3;
  --hux-interactive-subtle-muted: #a1a1a6;
  --hux-interactive-border: #505056;
  --hux-interactive-duration: 90ms;
  --hux-interactive-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

html[data-theme="light"] {
  --hux-interactive-inverse-surface: #ededf0;
  --hux-interactive-inverse-text: #202023;
  --hux-interactive-inverse-muted: #606066;
  --hux-interactive-subtle-surface: #f4f4f5;
  --hux-interactive-subtle-text: #18181b;
  --hux-interactive-subtle-muted: #52525b;
  --hux-interactive-border: #d4d4d8;
}

/* Interactive feedback must never move navigation, filters or utility controls. */
:is(
  .theme-toggle,
  .topbar .nav-link,
  .topbar .user-menu,
  .view-switch > .view-tab,
  #assets-view .asset-toolbar .search-wrap,
  #category-pills > .pill,
  #subcategory-pills > .secondary-pill,
  .sheet-close-button,
  .portal-dialog-close,
  .identity-dialog-close,
  .identity-account-settings,
  .profile-settings-close,
  .profile-settings-icon-action,
  .identity-avatar-select,
  .identity-profile-edit,
  .identity-profile-cancel,
  .auth-gate-secondary,
  .button.secondary,
  .button.ghost,
  .favorite-btn
) {
  transition:
    border-color var(--hux-interactive-duration) ease,
    background-color var(--hux-interactive-duration) var(--hux-interactive-ease),
    color 100ms ease,
    box-shadow var(--hux-interactive-duration) var(--hux-interactive-ease);
}

:is(
  .theme-toggle,
  .topbar .nav-link,
  .topbar .user-menu,
  .view-switch > .view-tab,
  #assets-view .asset-toolbar .search-wrap,
  #category-pills > .pill,
  #subcategory-pills > .secondary-pill,
  .sheet-close-button,
  .portal-dialog-close,
  .identity-dialog-close,
  .identity-account-settings,
  .profile-settings-close,
  .profile-settings-icon-action,
  .identity-avatar-select,
  .identity-profile-edit,
  .identity-profile-cancel,
  .auth-gate-secondary,
  .button.secondary,
  .button.ghost,
  .favorite-btn
):is(:hover, :focus-visible) {
  transform: none;
}

/* Neutral hover keeps surface, text, icon and metadata in the same theme. */
:is(
  .theme-toggle:not(:disabled),
  .topbar .nav-link:not(.active),
  .topbar .user-menu,
  .view-switch > .view-tab:not(.active),
  .sheet-close-button,
  .portal-dialog-close,
  .identity-dialog-close,
  .identity-account-settings,
  .profile-settings-close,
  .profile-settings-icon-action,
  .identity-avatar-select,
  .identity-profile-edit,
  .identity-profile-cancel,
  .auth-gate-secondary,
  .button.secondary,
  .button.ghost,
  .favorite-btn:not(.active):not([aria-pressed="true"])
):is(:hover, :focus-visible) {
  border-color: var(--hux-interactive-border) !important;
  background: var(--hux-interactive-inverse-surface) !important;
  color: var(--hux-interactive-inverse-text) !important;
  box-shadow: none;
}

:is(
  .theme-toggle:not(:disabled),
  .topbar .nav-link:not(.active),
  .topbar .user-menu,
  .view-switch > .view-tab:not(.active),
  .sheet-close-button,
  .portal-dialog-close,
  .identity-dialog-close,
  .identity-account-settings,
  .profile-settings-close,
  .profile-settings-icon-action,
  .identity-avatar-select,
  .identity-profile-edit,
  .identity-profile-cancel,
  .auth-gate-secondary,
  .button.secondary,
  .button.ghost,
  .favorite-btn:not(.active):not([aria-pressed="true"])
):is(:hover, :focus-visible) :is(.ui-icon, .icon, strong, [data-theme-label]) {
  color: var(--hux-interactive-inverse-text) !important;
}

.topbar .user-menu:is(:hover, :focus-visible) .user-copy small {
  color: var(--hux-interactive-inverse-muted) !important;
}

/* Search keeps the field legible while the whole row reverses. */
#assets-view .asset-toolbar .search-wrap:is(:hover, :focus-within) {
  border-color: var(--hux-interactive-border) !important;
  background: var(--hux-interactive-inverse-surface) !important;
  box-shadow: none;
}

#assets-view .asset-toolbar .search-wrap:is(:hover, :focus-within) :is(.ui-icon, input) {
  color: var(--hux-interactive-inverse-text) !important;
}

#assets-view .asset-toolbar .search-wrap:is(:hover, :focus-within) input::placeholder {
  color: var(--hux-interactive-inverse-muted) !important;
}

/* Taxonomy hover is clear and selected states remain singular. */
#category-pills > .pill:not(.active):not(:disabled):is(:hover, :focus-visible),
#subcategory-pills > .secondary-pill:not(.active):not(:disabled):is(:hover, :focus-visible) {
  border-color: var(--hux-interactive-border) !important;
  background: var(--hux-interactive-inverse-surface) !important;
  color: var(--hux-interactive-inverse-text) !important;
  box-shadow: none;
  transform: none;
}

#category-pills > .pill:not(.active):not(:disabled):is(:hover, :focus-visible) :is(.ui-icon, .pill-copy, .pill-count, .pill-branch-indicator),
#subcategory-pills > .secondary-pill:not(.active):not(:disabled):is(:hover, :focus-visible) :is(.ui-icon, .pill-count, span) {
  color: var(--hux-interactive-inverse-text) !important;
  transform: none;
}

#category-pills > .pill:not(.active):not(:disabled):is(:hover, :focus-visible) .pill-copy small {
  color: var(--hux-interactive-inverse-muted) !important;
}

#category-pills > .pill.active:is(:hover, :focus-visible),
#subcategory-pills > .secondary-pill.active:is(:hover, :focus-visible) {
  transform: none;
}

/* Buttons share gray hover; persistent selected states retain Hux red. */
:is(
  .upload-button,
  .button.primary,
  .auth-gate-primary:not(:disabled),
  .identity-github-login:not(:disabled),
  .identity-profile-save:not(:disabled),
  .agent-copy-pill:not(:disabled)
):is(:hover, :focus-visible) {
  border-color: var(--hux-interactive-border) !important;
  background: var(--hux-interactive-inverse-surface) !important;
  color: var(--hux-interactive-inverse-text) !important;
  box-shadow: none;
  transform: none;
}

:is(
  .upload-button,
  .button.primary,
  .auth-gate-primary:not(:disabled),
  .identity-github-login:not(:disabled),
  .identity-profile-save:not(:disabled),
  .agent-copy-pill:not(:disabled)
):is(:hover, :focus-visible) :is(.ui-icon, .icon, strong, span) {
  color: var(--hux-interactive-inverse-text) !important;
}

/* Clickable rows reverse their full content instead of leaving pale labels behind. */
.identity-option:not(.active):is(:hover, :focus-visible),
:is(
  .intake-type-option,
  .mcp-option,
  .mcp-auth-option,
  .mcp-approval-option
):not(.active):is(:hover, :focus-visible),
.intake-method-switch > button:not(.active):is(:hover, :focus-visible) {
  border-color: var(--hux-interactive-border) !important;
  background: var(--hux-interactive-inverse-surface) !important;
  color: var(--hux-interactive-inverse-text) !important;
  box-shadow: none;
  transform: none;
}

.identity-option:not(.active):is(:hover, :focus-visible) :is(strong, .ui-icon, .identity-option-state),
:is(
  .intake-type-option,
  .mcp-option,
  .mcp-auth-option,
  .mcp-approval-option
):not(.active):is(:hover, :focus-visible) :is(strong, .ui-icon),
.intake-method-switch > button:not(.active):is(:hover, :focus-visible) :is(strong, .ui-icon) {
  color: var(--hux-interactive-inverse-text) !important;
}

.identity-option:not(.active):is(:hover, :focus-visible) :is(small, p),
:is(
  .intake-type-option,
  .mcp-option,
  .mcp-auth-option,
  .mcp-approval-option
):not(.active):is(:hover, :focus-visible) :is(small, p) {
  color: var(--hux-interactive-inverse-muted) !important;
}

/* Destructive/session action uses one decisive red state. */
.identity-session-logout:is(:hover, :focus-visible) {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgb(223 63 67 / 18%);
  transform: none;
}

.identity-session-logout:is(:hover, :focus-visible) :is(.ui-icon, .identity-logout-icon, span) {
  color: #ffffff !important;
}

/* Detail links become a complete brand action on hover. */
.skill-detail-link:is(:hover, :focus-visible),
.workflow-source-link:is(:hover, :focus-visible) {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgb(223 63 67 / 16%);
  transform: none;
}

.skill-detail-link:is(:hover, :focus-visible) :is(.ui-icon, .icon, span),
.workflow-source-link:is(:hover, :focus-visible) :is(.ui-icon, .icon, span) {
  color: #ffffff !important;
}

/* Cards keep their accepted geometry; only the surface and internal signifiers respond. */
.asset-card,
.asset-card:hover,
.asset-card:focus-visible,
.asset-card:focus-within {
  transform: none;
}

.asset-card:hover .card-category-tag,
.asset-card:focus-visible .card-category-tag,
.asset-card:focus-within .card-category-tag {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #ffffff !important;
}

.asset-card:hover > .favorite-btn:not(.active):not([aria-pressed="true"]),
.asset-card:focus-within > .favorite-btn:not(.active):not([aria-pressed="true"]) {
  border-color: var(--hux-interactive-inverse-surface) !important;
  background: var(--hux-interactive-inverse-surface) !important;
  color: var(--hux-interactive-inverse-text) !important;
}

#asset-grid .skill-card > .favorite-btn.active,
#asset-grid .skill-card > .favorite-btn[aria-pressed="true"],
#asset-grid .skill-card > .favorite-btn.active:is(:hover, :focus-visible),
#asset-grid .skill-card > .favorite-btn[aria-pressed="true"]:is(:hover, :focus-visible) {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #ffffff !important;
  transform: none;
}

#asset-grid .skill-card > .favorite-btn.active .ui-icon,
#asset-grid .skill-card > .favorite-btn[aria-pressed="true"] .ui-icon {
  color: #ffffff !important;
}

/* Light cards use a light body, so every expanded card label must stay dark. */
html[data-theme="light"] .asset-card .skill-card-body,
html[data-theme="light"] .asset-card:hover .skill-card-body,
html[data-theme="light"] .asset-card:focus-visible .skill-card-body,
html[data-theme="light"] .asset-card:focus-within .skill-card-body {
  background: #ffffff;
  color: #18181b;
}

html[data-theme="light"] .asset-card:is(:hover, :focus-visible, :focus-within) .skill-card-body {
  background: #fafafa;
}

html[data-theme="light"] .asset-card .skill-owner-copy strong {
  color: #18181b !important;
}

html[data-theme="light"] .asset-card .skill-owner-copy .skill-card-summary,
html[data-theme="light"] .asset-card:is(:hover, :focus-visible, :focus-within) .skill-owner-copy .skill-card-summary {
  color: #52525b;
}

html[data-theme="light"] .asset-card .skill-card .badge,
html[data-theme="light"] .asset-card .badge.level {
  border-color: #d4d4d8;
  background: #f4f4f5;
  color: #3f3f46 !important;
}

html[data-theme="light"] .asset-card .skill-footer {
  border-top-color: #e4e4e7;
}

/* The primary rail carries older high-specificity rules, so keep its final state explicit. */
html[data-theme] #category-pills > .pill:not(.active):not(:disabled):hover,
html[data-theme] #category-pills > .pill:not(.active):not(:disabled):focus-visible {
  border-color: var(--hux-interactive-border) !important;
  background: var(--hux-interactive-inverse-surface) !important;
  color: var(--hux-interactive-inverse-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme] #category-pills > button.pill:not(.active):hover,
html[data-theme] #category-pills > button.pill:not(.active):focus-visible {
  border-color: var(--hux-interactive-border) !important;
  background-color: var(--hux-interactive-inverse-surface) !important;
  color: var(--hux-interactive-inverse-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme] #category-pills > button.pill:not(.active):is(:hover, :focus-visible) :is(svg, .pill-label, .pill-count) {
  color: var(--hux-interactive-inverse-text) !important;
  stroke: currentColor !important;
}

html[data-theme] #category-pills > button.pill:disabled {
  border-color: transparent !important;
  background-color: transparent !important;
  color: var(--hux-tab-text) !important;
}

html[data-theme] #category-pills > .pill:not(.active):not(:disabled):hover :is(.ui-icon, .pill-copy, .pill-count, .pill-branch-indicator),
html[data-theme] #category-pills > .pill:not(.active):not(:disabled):focus-visible :is(.ui-icon, .pill-copy, .pill-count, .pill-branch-indicator) {
  color: var(--hux-interactive-inverse-text) !important;
  transform: none !important;
}

/* Large data cards use a restrained hover so dashboard hierarchy stays calm. */
:is(.dashboard-metrics article.metric-card, .activity-category-pane .category-row, .recent-item):is(:hover, :focus-visible) {
  border-color: var(--hux-interactive-border);
  background: var(--hux-interactive-subtle-surface);
  color: var(--hux-interactive-subtle-text);
  transform: none;
}

:is(.dashboard-metrics article.metric-card, .activity-category-pane .category-row, .recent-item):is(:hover, :focus-visible) :is(strong, .ui-icon) {
  color: var(--hux-interactive-subtle-text);
}

:is(.dashboard-metrics article.metric-card, .activity-category-pane .category-row, .recent-item):is(:hover, :focus-visible) :is(small, p) {
  color: var(--hux-interactive-subtle-muted);
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .theme-toggle,
    .topbar .nav-link,
    .topbar .user-menu,
    .view-switch > .view-tab,
    #assets-view .asset-toolbar .search-wrap,
    #category-pills > .pill,
    #subcategory-pills > .secondary-pill,
    .sheet-close-button,
    .portal-dialog-close,
    .identity-dialog-close,
    .identity-account-settings,
    .profile-settings-close,
    .profile-settings-icon-action,
    .identity-avatar-select,
    .identity-profile-edit,
    .identity-profile-cancel,
    .auth-gate-secondary,
    .button,
    .favorite-btn,
    .identity-option,
    .intake-type-option,
    .mcp-option,
    .mcp-auth-option,
    .mcp-approval-option,
    .identity-session-logout,
    .skill-detail-link,
    .workflow-source-link
  ) {
    transition-duration: 0.01ms !important;
  }
}