/* Keyboard Shortcuts Styling */

/* Kbd styling for shortcuts help */
kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875em;
  font-weight: 600;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Active shortcut indicator */
.shortcut-active {
  background-color: #dbeafe !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

/* Shortcut feedback animations */
.shortcut-feedback {
  animation: shortcut-slide-in 0.3s ease-out;
}

@keyframes shortcut-slide-in {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Focus indicators for keyboard navigation */
.keyboard-focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Category cards keyboard indicators */
.category-card.keyboard-highlight {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1) !important;
}

/* Space dropdown keyboard indicators */
.space-item.keyboard-highlight {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
}

/* Timer control visual feedback */
.timer-stopping {
  animation: timer-pulse 0.6s ease-in-out;
}

@keyframes timer-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Responsive kbd styling */
@media (max-width: 640px) {
  kbd {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
  }
}