/* ============================================================
   Shared Component CSS Foundation
   All Phase 3 components consume these classes.
   Component-specific CSS lives in each component file via
   Tailwind utilities + the classes defined here.
   ============================================================ */

/* === CSS @property for animated gradient sweep (glow perimeter) === */

@property --hh-sweep-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* === Keyframes === */

/* Glow perimeter sweep rotation */
@keyframes hh-sweep-rotate {
  to { --hh-sweep-angle: 360deg; }
}

/* Focus state: slow, subtle pulsing glow on the border */
@keyframes hh-focus-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 var(--hh-glow-blur-md)
      color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 30%, transparent));
  }
  50% {
    filter: drop-shadow(0 0 var(--hh-glow-blur-lg)
      color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 55%, transparent));
  }
}

/* Crystal flicker animation for scrollbar indicator */
@keyframes hh-crystal-flicker {
  0% { opacity: 0; transform: scaleY(0.7); }
  40% { opacity: 0.8; }
  60% { opacity: 0.3; }
  100% { opacity: 1; transform: scaleY(1); }
}

/* === Interaction State Utility Classes === */

/* -- Hover state: glow intensification + inner background gradient grows from left -- */
.hh-hover-gradient {
  position: relative;
}

.hh-hover-gradient::after {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 25%, transparent) 0%,
    color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 25%, transparent) 20%,
    transparent 65%
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--hh-transition-normal) ease-out;
}

.hh-hover-gradient:hover::after {
  background-size: 100% 100%;
}

/* -- Focus state: slow pulsing glow via :focus-visible (not :focus, avoids mouse click pulse) -- */
.hh-focus-pulse:focus-visible {
  animation: hh-focus-pulse 2s ease-in-out infinite;
  outline: none;
}

/* -- Active/pressed state: border color floods inward as background fill, then recedes -- */
.hh-active-flood:active::after {
  background: color-mix(in srgb, var(--hh-comp-accent, currentColor) 40%, var(--hh-comp-bg, var(--hh-raw-void-start)));
  transition: background 80ms ease-in;
}

/* -- Disabled state: "powered off" -- */
.hh-disabled:disabled,
.hh-disabled[aria-disabled="true"] {
  filter: grayscale(0.7) brightness(0.5);
  pointer-events: none;
  opacity: 0.5;
}

/* === Size System === */

.hh-size-sm {
  --hh-comp-pad-x: 0.5rem;
  --hh-comp-pad-y: 0.25rem;
  --hh-comp-font: var(--hh-text-xs);
  --hh-comp-notch: var(--hh-notch-sm);
}

.hh-size-md {
  --hh-comp-pad-x: 0.75rem;
  --hh-comp-pad-y: 0.375rem;
  --hh-comp-font: var(--hh-text-sm);
  --hh-comp-notch: var(--hh-notch-sm);
}

.hh-size-lg {
  --hh-comp-pad-x: 1rem;
  --hh-comp-pad-y: 0.5rem;
  --hh-comp-font: var(--hh-text-base);
  --hh-comp-notch: var(--hh-notch-md);
}

/* === Semantic Color Variant Classes === */

.hh-color-success { --hh-comp-accent: var(--hh-color-success); }
.hh-color-error { --hh-comp-accent: var(--hh-color-error); }
.hh-color-warning { --hh-comp-accent: var(--hh-color-warning); }
.hh-color-info { --hh-comp-accent: var(--hh-color-primary); }

/* === Button Variant Classes === */

/* Secondary button: cyan accent (--hh-color-primary is cyan) */
.hh-btn--secondary {
  color: var(--hh-color-primary);
}

/* Ghost button: no border or fill pseudo-elements, text-only with hover glow */
.hh-btn--ghost {
  position: relative;
  isolation: isolate;
  font-family: var(--hh-font-mono);
  font-weight: var(--hh-weight-medium);
  padding: var(--hh-comp-pad-y, 0.375rem) var(--hh-comp-pad-x, 1rem);
  font-size: var(--hh-comp-font, var(--hh-text-sm));
  background: transparent;
  border: none;
  color: var(--hh-comp-accent, var(--hh-color-text-muted));
  cursor: pointer;
  transition: filter var(--hh-transition-fast), color var(--hh-transition-fast);
}

.hh-btn--ghost:hover {
  color: var(--hh-comp-accent, var(--hh-color-primary));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 40%, transparent));
}

.hh-btn--ghost:active {
  color: var(--hh-comp-accent, var(--hh-color-primary));
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 60%, transparent));
}

/* Button size integration: override hh-btn padding/font from size system */
.hh-btn.hh-size-sm,
.hh-btn--ghost.hh-size-sm {
  padding: var(--hh-comp-pad-y) var(--hh-comp-pad-x);
  font-size: var(--hh-comp-font);
  --notch: var(--hh-comp-notch);
}

.hh-btn.hh-size-md,
.hh-btn--ghost.hh-size-md {
  padding: var(--hh-comp-pad-y) var(--hh-comp-pad-x);
  font-size: var(--hh-comp-font);
  --notch: var(--hh-comp-notch);
}

.hh-btn.hh-size-lg,
.hh-btn--ghost.hh-size-lg {
  padding: var(--hh-comp-pad-y) var(--hh-comp-pad-x);
  font-size: var(--hh-comp-font);
  --notch: var(--hh-comp-notch);
}

/* Button loading spinner */
@keyframes hh-spin {
  to { transform: rotate(360deg); }
}

.hh-btn__spinner {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%; /* spinner is circular -- exception to no-radius rule */
  animation: hh-spin 0.6s linear infinite;
  margin-right: 0.5em;
  vertical-align: middle;
}

.hh-btn__content--loading {
  opacity: 0.6;
}

/* === Label Classes === */

.hh-label {
  display: inline-block;
  color: var(--hh-color-text);
  letter-spacing: var(--hh-tracking-wide);
  text-transform: uppercase;
}

.hh-label--sm {
  font-size: var(--hh-text-xs);
}

.hh-label--md {
  font-size: var(--hh-text-sm);
}

.hh-label--lg {
  font-size: var(--hh-text-base);
}

/* === Panel Variant Classes === */

/* Panel size padding overrides */
.hh-panel--sm {
  padding: 0.5rem;
}

.hh-panel--md {
  padding: 1rem;
}

.hh-panel--lg {
  padding: 1.5rem;
}

/* Borderless panel: fill background only, no border pseudo-elements */
.hh-panel--borderless {
  --notch: var(--hh-notch-lg);
  position: relative;
  padding: 1rem;
  background: color-mix(in srgb, var(--hh-color-surface) 25%, var(--hh-raw-void-start, #030712));
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 15%, transparent));
}

/* Remove glow when explicitly disabled */
.hh-panel--no-glow {
  filter: none;
}

/* === Input Wrapper (TextInput component) === */

.hh-input-wrapper {
  --notch: var(--hh-comp-notch, var(--hh-notch-sm));
  --bw: 1px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 15%, transparent));
}

/* Border layer */
.hh-input-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hh-comp-accent, var(--hh-color-border-bright));
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
  z-index: -2;
  pointer-events: none;
  transition: background var(--hh-transition-fast);
}

/* Fill layer */
.hh-input-wrapper::after {
  content: '';
  position: absolute;
  inset: var(--bw);
  background: color-mix(in srgb, var(--hh-color-surface) 50%, var(--hh-raw-void-start, #030712));
  clip-path: polygon(
    calc(var(--notch) - var(--bw) * 0.59) 0,
    100% 0,
    100% calc(100% - var(--notch) + var(--bw) * 0.59),
    calc(100% - var(--notch) + var(--bw) * 0.59) 100%,
    0 100%,
    0 calc(var(--notch) - var(--bw) * 0.59)
  );
  z-index: -1;
  pointer-events: none;
  transition: background var(--hh-transition-fast);
}

/* Input within wrapper: transparent, full-width */
.hh-input-wrapper .hh-input {
  background: transparent;
  border: none;
  width: 100%;
  padding: var(--hh-comp-pad-y, 0.375rem) var(--hh-comp-pad-x, 0.75rem);
  font-size: var(--hh-comp-font, var(--hh-text-sm));
  position: relative;
  z-index: 1;
}

.hh-input-wrapper .hh-input:focus {
  box-shadow: none;
}

/* Focus state: brighten border */
.hh-input-wrapper:focus-within::before {
  background: var(--hh-comp-accent, var(--hh-color-primary));
}

/* Focus state: bottom edge glow */
.hh-input-wrapper:focus-within {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 35%, transparent));
}

/* Focus state: scanline + vignette background on the fill layer */
.hh-input-wrapper:focus-within::after {
  --fill: color-mix(in srgb, var(--hh-color-surface) 50%, var(--hh-raw-void-start, #030712));
  background:
    /* Vignette fade */
    radial-gradient(ellipse at center, transparent 20%, var(--fill) 80%),
    /* Scanline bars: 3px bar, 5px gap, 4% opacity */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 5px,
      color-mix(in srgb, var(--hh-color-text) 4%, transparent) 5px,
      color-mix(in srgb, var(--hh-color-text) 4%, transparent) 8px
    ),
    /* Base fill */
    var(--fill);
}

/* Bottom edge glow indicator line */
.hh-input__bottom-glow {
  position: absolute;
  bottom: 0;
  left: var(--notch, 4px);
  right: var(--notch, 4px);
  height: 2px;
  background: var(--hh-comp-accent, var(--hh-color-primary));
  opacity: 0;
  z-index: 2;
  transition: opacity var(--hh-transition-fast);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 60%, transparent);
}

.hh-input-wrapper:focus-within .hh-input__bottom-glow {
  opacity: 1;
}

/* Error state border */
.hh-input-wrapper--error::before {
  background: var(--hh-color-error);
}

/* === Toggle Classes === */

.hh-toggle {
  --track-w: 2.5rem;
  --track-h: 1.25rem;
  --thumb-size: 0.875rem;
  --notch: var(--hh-notch-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--hh-font-mono);
  font-size: var(--hh-text-sm);
  color: var(--hh-color-text);
}

.hh-toggle:focus-visible {
  outline: none;
}

.hh-toggle:focus-visible .hh-toggle__track {
  animation: hh-focus-pulse 2s ease-in-out infinite;
}

.hh-toggle__track {
  position: relative;
  width: var(--track-w);
  height: var(--track-h);
  background: var(--hh-color-border);
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
  transition: background var(--hh-transition-normal);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 15%, transparent));
}

.hh-toggle--on .hh-toggle__track {
  background: color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 35%, var(--hh-color-border));
}

.hh-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: var(--thumb-size);
  height: var(--thumb-size);
  transform: translateY(-50%);
  background: var(--hh-color-text-dim);
  clip-path: polygon(
    2px 0, 100% 0,
    100% calc(100% - 2px),
    calc(100% - 2px) 100%,
    0 100%, 0 2px
  );
  transition: left var(--hh-transition-normal), background var(--hh-transition-normal),
    filter var(--hh-transition-normal);
}

.hh-toggle--on .hh-toggle__thumb {
  left: calc(var(--track-w) - var(--thumb-size) - 3px);
  background: var(--hh-comp-accent, var(--hh-color-primary));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 50%, transparent));
}

/* Toggle size variants */
.hh-toggle.hh-size-sm {
  --track-w: 2rem;
  --track-h: 1rem;
  --thumb-size: 0.625rem;
  font-size: var(--hh-text-xs);
}

.hh-toggle.hh-size-lg {
  --track-w: 3rem;
  --track-h: 1.5rem;
  --thumb-size: 1.125rem;
  font-size: var(--hh-text-base);
}

/* === Slider Classes === */

.hh-slider {
  --track-h: 4px;
  --thumb-w: 12px;
  --thumb-h: 20px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2rem;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.hh-slider:focus-visible {
  outline: none;
}

.hh-slider:focus-visible .hh-slider__track-wrapper {
  animation: hh-focus-pulse 2s ease-in-out infinite;
}

.hh-slider__track-wrapper {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 20%, transparent));
}

.hh-slider__track {
  position: relative;
  width: 100%;
  height: var(--track-h);
  background: var(--hh-color-border);
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

.hh-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--hh-comp-accent, var(--hh-color-primary));
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
  transition: width 0ms; /* No transition during drag */
}

.hh-slider__thumb {
  position: absolute;
  top: 50%;
  width: var(--thumb-w);
  height: var(--thumb-h);
  transform: translate(-50%, -50%);
  background: var(--hh-comp-accent, var(--hh-color-primary));
  clip-path: polygon(
    2px 0, calc(100% - 2px) 0,
    100% 2px, 100% calc(100% - 2px),
    calc(100% - 2px) 100%, 2px 100%,
    0 calc(100% - 2px), 0 2px
  );
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 40%, transparent));
  transition: filter var(--hh-transition-fast);
  z-index: 1;
}

.hh-slider__thumb:hover,
.hh-slider--dragging .hh-slider__thumb {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 65%, transparent));
}

.hh-slider__tooltip {
  --notch: 3px;
  position: absolute;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 2px 6px;
  font-family: var(--hh-font-mono);
  font-size: var(--hh-text-xs);
  color: var(--hh-color-text);
  background: color-mix(in srgb, var(--hh-color-surface) 90%, var(--hh-raw-void-start, #030712));
  border: 1px solid var(--hh-comp-accent, var(--hh-color-primary));
  clip-path: polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0,
    100% var(--notch), 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, var(--notch) 100%,
    0 calc(100% - var(--notch)), 0 var(--notch)
  );
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 30%, transparent));
}

/* Slider size variants */
.hh-slider.hh-size-sm {
  --track-h: 3px;
  --thumb-w: 10px;
  --thumb-h: 16px;
  min-height: 1.5rem;
}

.hh-slider.hh-size-lg {
  --track-h: 6px;
  --thumb-w: 14px;
  --thumb-h: 24px;
  min-height: 2.5rem;
}

/* === Divider Style === */

/* Tapered divider: thick under header text, 45-degree angle taper to thin.
   The parent element should be display: inline-block (or wrapping span)
   so the divider matches the text width naturally. */
.hh-divider-tapered {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.hh-divider-tapered::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--hh-color-secondary);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% + 3px) 100%,
    0 100%
  );
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--hh-color-secondary) 50%, transparent);
  pointer-events: none;
}

/* Extended version: thick portion + thin trailing line.
   Use on a full-width container. Set --hh-divider-thick-width
   to the text width via JS or use the inline-block trick above. */
.hh-divider-taper-full {
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--hh-color-secondary) 30%, transparent);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.hh-divider-taper-full::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--hh-divider-thick-width, 120px);
  height: 3px;
  background: var(--hh-color-secondary);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% + 3px) 100%,
    0 100%
  );
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--hh-color-secondary) 50%, transparent);
  pointer-events: none;
}

/* === Dropdown Classes === */

.hh-dropdown {
  display: inline-block;
  position: relative;
}

/* Trigger button extends hh-btn, add width constraints */
.hh-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 10rem;
  text-align: left;
}

/* Override hh-btn text color for dropdown -- use primary instead of secondary (magenta) */
.hh-dropdown-trigger {
  color: var(--hh-comp-accent, var(--hh-color-primary));
}

/* Chevron indicator */
.hh-dropdown-trigger__chevron {
  display: inline-block;
  font-size: 0.75em;
  transition: transform var(--hh-transition-fast);
  transform: rotate(90deg);
  flex-shrink: 0;
}

.hh-dropdown-trigger__chevron--open {
  transform: rotate(-90deg);
}

/* Label truncation */
.hh-dropdown-trigger__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* === Dropdown Popup (rendered via Portal) === */

.hh-dropdown-popup {
  --notch: var(--hh-comp-notch, var(--hh-notch-sm));
  --bw: 1px;
  --popup-bg: color-mix(in srgb, var(--hh-color-surface) 90%, var(--hh-raw-void-start, #030712));
  z-index: 9999;
  min-width: 10rem;
  padding: 4px 0;
  font-family: var(--hh-font-mono);
  font-size: var(--hh-comp-font, var(--hh-text-sm));
  isolation: isolate;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 30%, transparent));
}

/* Border layer */
.hh-dropdown-popup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hh-comp-accent, var(--hh-color-primary));
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
  z-index: -2;
  pointer-events: none;
}

/* Fill layer with scanline */
.hh-dropdown-popup::after {
  content: '';
  position: absolute;
  inset: var(--bw);
  background:
    /* Vignette */
    radial-gradient(ellipse at center, transparent 20%, var(--popup-bg) 80%),
    /* Scanlines */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 5px,
      color-mix(in srgb, var(--hh-color-text) 4%, transparent) 5px,
      color-mix(in srgb, var(--hh-color-text) 4%, transparent) 8px
    ),
    /* Base fill */
    var(--popup-bg);
  clip-path: polygon(
    calc(var(--notch) - var(--bw) * 0.59) 0,
    100% 0,
    100% calc(100% - var(--notch) + var(--bw) * 0.59),
    calc(100% - var(--notch) + var(--bw) * 0.59) 100%,
    0 100%,
    0 calc(var(--notch) - var(--bw) * 0.59)
  );
  z-index: -1;
  pointer-events: none;
}

/* === Dropdown Option === */

.hh-dropdown-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  color: var(--hh-color-text);
  transition: background var(--hh-transition-fast), color var(--hh-transition-fast);
}

/* Hover/active state: gradient from left */
.hh-dropdown-option--active {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 20%, transparent) 0%,
    color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 12%, transparent) 30%,
    transparent 70%
  );
  color: var(--hh-color-text);
}

/* Selected indicator: accent-color left edge bar */
.hh-dropdown-option__indicator {
  width: 2px;
  height: 1em;
  background: transparent;
  flex-shrink: 0;
  transition: background var(--hh-transition-fast);
}

.hh-dropdown-option--selected .hh-dropdown-option__indicator {
  background: var(--hh-comp-accent, var(--hh-color-primary));
  box-shadow: 0 0 4px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 50%, transparent);
}

.hh-dropdown-option__label {
  flex: 1;
}

/* Disabled option */
.hh-dropdown-option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Table Classes === */

.hh-table-wrapper {
  --notch: var(--hh-notch-lg);
  --bw: 1px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 15%, transparent));
}

/* Border layer */
.hh-table-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 60%, transparent);
  clip-path: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );
  z-index: -2;
  pointer-events: none;
}

/* Fill layer */
.hh-table-wrapper::after {
  content: '';
  position: absolute;
  inset: var(--bw);
  background: color-mix(in srgb, var(--hh-color-surface) 20%, var(--hh-raw-void-start, #030712));
  clip-path: polygon(
    calc(var(--notch) - var(--bw) * 0.59) 0,
    100% 0,
    100% calc(100% - var(--notch) + var(--bw) * 0.59),
    calc(100% - var(--notch) + var(--bw) * 0.59) 100%,
    0 100%,
    0 calc(var(--notch) - var(--bw) * 0.59)
  );
  z-index: -1;
  pointer-events: none;
}

.hh-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hh-font-mono);
  font-size: var(--hh-text-sm);
  color: var(--hh-color-text);
  position: relative;
  z-index: 1;
}

/* Table header */
.hh-table thead th {
  font-family: var(--hh-font-display);
  font-weight: var(--hh-weight-semibold);
  font-size: var(--hh-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hh-tracking-wider);
  color: var(--hh-comp-accent, var(--hh-color-primary));
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 40%, transparent);
  background: color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 5%, transparent);
  white-space: nowrap;
  user-select: none;
}

/* Sortable header */
.hh-table__th--sortable {
  cursor: pointer;
  transition: color var(--hh-transition-fast);
}

.hh-table__th--sortable:hover {
  color: var(--hh-color-text);
}

/* Sort indicator */
.hh-table__sort-indicator {
  display: inline-block;
  margin-left: 0.375rem;
  font-size: 0.625em;
  opacity: 0.4;
  transition: opacity var(--hh-transition-fast), transform var(--hh-transition-fast);
}

.hh-table__th--sorted .hh-table__sort-indicator {
  opacity: 1;
  color: var(--hh-comp-accent, var(--hh-color-primary));
}

.hh-table__sort-indicator--desc {
  transform: rotate(180deg);
}

/* Table body rows */
.hh-table tbody td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hh-color-border) 30%, transparent);
}

/* Row hover */
.hh-table tbody tr {
  transition: background var(--hh-transition-fast);
}

.hh-table tbody tr:hover {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 8%, transparent) 0%,
    color-mix(in srgb, var(--hh-comp-accent, var(--hh-color-primary)) 4%, transparent) 40%,
    transparent 80%
  );
}

/* Last row: no bottom border */
.hh-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table size variants */
.hh-table-wrapper.hh-size-sm .hh-table thead th {
  padding: 0.5rem 0.75rem;
  font-size: var(--hh-text-xs);
}

.hh-table-wrapper.hh-size-sm .hh-table tbody td {
  padding: 0.375rem 0.75rem;
  font-size: var(--hh-text-xs);
}

.hh-table-wrapper.hh-size-lg .hh-table thead th {
  padding: 1rem 1.25rem;
}

.hh-table-wrapper.hh-size-lg .hh-table tbody td {
  padding: 0.75rem 1.25rem;
}