/* Debug log panel (prototype only, rendered by modules/debug-panel.js). Tokens only, .mh-* selectors only.
   It sits in normal flow at the very end of the page, so it never covers the form, and its z-index stays
   below the cookie bar (the library uses a very high z-index). */
.mh-debug {
  position: relative;
  z-index: 1;
  margin: var(--mh-space-6) var(--mh-space-4) var(--mh-space-8);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-radius-md);
  background: var(--mh-surface);
  color: var(--mh-text);
  font-size: 14px;
}

.mh-debug__summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--mh-space-4);
  cursor: pointer;
  font-weight: 600;
  color: var(--mh-text-muted);
}

.mh-debug__summary:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-debug__list {
  margin: 0;
  padding: var(--mh-space-2) var(--mh-space-4) var(--mh-space-4) calc(var(--mh-space-4) + 1.5em);
  max-height: 40vh;
  overflow-y: auto;
}

.mh-debug__item {
  padding: var(--mh-space-1) 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}