/*
 * Path: css/components/debug.css
 * Purpose: Opt-in debug panel styles
 * Depends on: css/core/tokens.css
 * Version: 0.9.0 (pre-1.0)
 */

.debug{
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 1000;
  scrollbar-gutter: stable both-edges;

  max-width: 50vw;
  min-width: 200px;
  max-height: calc(var(--debug-lines) * (1em * var(--debug-lh)) + 12px);

  padding: 8px 10px;
  white-space: pre-line;
  color: #fff;

  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  background: rgba(0,0,0,.65);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(2px);

  overflow-y: auto;
}

.debug h2{ display: none; }
.debug .kv{
  display: grid;
  gap: 4px 10px;
  grid-template-columns: auto 1fr;
}
.debug dt{ opacity: .85; }
.debug dd{ margin: 0; }