/* Hux Studio control system v132: one compact geometry for card and theme actions. */

:root {
  --hux-control-height: 36px;
  --hux-control-icon-box: 36px;
  --hux-control-icon-size: 18px;
  --hux-control-padding-inline: 12px;
  --hux-control-gap: 8px;
  --hux-control-inset: 12px;
}

/* Square icon actions share the same visible box and icon canvas. */
#asset-grid .skill-card > .favorite-btn,
#asset-grid .skill-card:hover > .favorite-btn,
#asset-grid .skill-card:focus-visible > .favorite-btn,
#asset-grid .skill-card:focus-within > .favorite-btn,
#asset-grid .skill-card:focus-within:not(:hover) > .favorite-btn {
  inset: auto var(--hux-control-inset) var(--hux-control-inset) auto;
  width: var(--hux-control-icon-box);
  min-width: var(--hux-control-icon-box);
  height: var(--hux-control-icon-box);
  min-height: var(--hux-control-icon-box);
  padding: 0;
  box-sizing: border-box;
}

#asset-grid .skill-card > .favorite-btn :is(.ui-icon, .icon),
.theme-toggle .theme-toggle-icon {
  width: var(--hux-control-icon-size) !important;
  height: var(--hux-control-icon-size) !important;
}

/* Text controls keep their natural width while sharing the 36px control height. */
#asset-grid .card-category-tag {
  width: auto;
  height: var(--hux-control-height);
  min-height: var(--hux-control-height);
  padding-inline: var(--hux-control-padding-inline);
  gap: var(--hux-control-gap);
  box-sizing: border-box;
  white-space: nowrap;
}

/* The topbar keeps its structural column; the visible theme control matches card actions. */
html[data-theme] .topbar > .sidebar-footer > .theme-toggle.theme-toggle-global::before {
  width: var(--hux-control-icon-box);
  height: var(--hux-control-icon-box);
  box-sizing: border-box;
}

html[data-theme] .workspace-actions > .theme-toggle.theme-toggle-mobile {
  width: var(--hux-control-icon-box);
  min-width: var(--hux-control-icon-box);
  height: var(--hux-control-icon-box);
  min-height: var(--hux-control-icon-box);
  padding: 0;
  box-sizing: border-box;
}

/* A 36px footer control plus the shared inset fits without dead space. */
#asset-grid .asset-card {
  grid-template-rows: auto 108px;
}

#asset-grid .skill-card-body,
#asset-grid .asset-card:hover .skill-card-body,
#asset-grid .asset-card:focus-visible .skill-card-body,
#asset-grid .asset-card:focus-within .skill-card-body {
  min-height: 108px;
}

@media (prefers-reduced-motion: reduce) {
  #asset-grid .skill-card > .favorite-btn,
  .theme-toggle,
  .card-category-tag {
    transition-duration: 0.01ms !important;
  }
}