/* =============================================================================
   Pixel Editor — slide-over help panel
   -----------------------------------------------------------------------------
   Right-docked, resizable, dismissable with Esc or F1. Renders the
   same DocContent tree as the per-panel docs so the editor gets a rich
   tour without a separate content format.
   ============================================================================= */

.pe-help-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  min-width: 280px;
  max-width: 80%;
  z-index: 40;
  background: rgba(12, 12, 22, 0.96);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(251, 241, 87, 0.25);
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

.pe-help-panel.open {
  transform: translateX(0);
}

/* When the panel is closed it's translated off-screen to the right, but
   the resize handle hangs 3px past its left edge — which puts it right on
   the window's right-edge resize zone and steals the cursor. Disable pointer
   events entirely while hidden. */
.pe-help-panel:not(.open) {
  pointer-events: none;
}

.pe-help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(251, 241, 87, 0.05);
}

.pe-help-panel-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.pe-help-panel-close {
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-muted);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pe-help-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

.pe-help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 24px;
}

/* Override the default documentation-section margin/padding so it fits
   the narrower slide-over without feeling cramped. */
.pe-help-panel-body .documentation-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  max-width: none;
}

.pe-help-panel-body .documentation-section h4 {
  font-size: var(--font-size-base);
  color: var(--color-accent);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.pe-help-panel-body .documentation-section h4:first-of-type {
  margin-top: 0;
}

.pe-help-panel-body .documentation-section p,
.pe-help-panel-body .documentation-section li {
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.pe-help-panel-body .documentation-section ul {
  margin-left: var(--space-md);
}

.pe-help-panel-body .documentation-section kbd {
  font-size: 0.75em;
  padding: 1px 5px;
}

/* Resize handle on the left edge */
.pe-help-panel-resize {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 1;
}

.pe-help-panel-resize::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: transparent;
  transition: background var(--transition-fast);
}

.pe-help-panel-resize:hover::before,
.pe-help-panel-resize.dragging::before {
  background: var(--color-accent);
}

/* Help toolbar button — reuses the generic .help-button with the small
   variant, but we override the color to blend into the pixel editor
   toolbar so it doesn't scream across the chrome. */
.pe-tool-btn.pe-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
}

.pe-tool-btn.pe-help-btn.active {
  background: rgba(251, 241, 87, 0.2);
  color: var(--color-accent);
  border-color: var(--color-accent);
}