/* The Debug console: a narrow window (a third of the screen at most), its navigation on top (categories, then the sections of one category) and one scrolling content area. */
.gfw.debug-console { --dc-bg: #f5f3ec; --dc-card: #fffdf8; --dc-line: #d9d3c2; --dc-text: #26241d; --dc-mute: #6c6859; --dc-accent: #2f6f66; --dc-soft: #e2eeea; --dc-warn: #a85f00; --dc-bad: #b3261e; --dc-good: #2b7a3d;
  width: clamp(400px, 33.333vw, 33.333vw) !important; max-width: 100vw; min-width: min(400px, 100vw); }
.gfw.debug-console > .gfw-body { display: flex; flex-direction: column; height: min(86dvh, 900px); max-height: calc(100dvh - 70px); padding: 0; overflow: hidden; background: var(--dc-bg); color: var(--dc-text); font-size: 12px; }
.debug-console .dc-top { flex: none; padding: 8px 10px 0; background: #ebe7d9; border-bottom: 1px solid var(--dc-line); display: flex; flex-direction: column; gap: 6px; }
.debug-console .dc-top > input { width: 100%; }
.dc-cats { display: flex; gap: 2px; }
.debug-console .dc-cat { flex: 1; padding: 6px 4px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dc-mute); background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; }
.debug-console .dc-cat:hover { color: var(--dc-text); }
.debug-console .dc-cat.on { color: var(--dc-accent); border-bottom-color: var(--dc-accent); }
.dc-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0 8px; }
.debug-console .dc-nav .gfw-tab { padding: 4px 9px; font-size: 12px; border-radius: 999px; border: 1px solid var(--dc-line); background: #fff; color: var(--dc-text); }
.debug-console .dc-nav .gfw-tab:hover { border-color: var(--dc-accent); }
.debug-console .dc-nav .gfw-tab.on { color: #fff; background: var(--dc-accent); border-color: var(--dc-accent); }
.dc-main { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 16px; }
.dc-heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dc-heading h2 { font-size: 15px; margin: 0; }
.dc-heading p { margin: 0; font-size: 11px; flex: 1 1 160px; }
.debug-console .nd-debug { display: block; min-width: 0; }
.debug-console [hidden] { display: none !important; }
.debug-console :focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 1px; }
.debug-console .mute { color: var(--dc-mute); line-height: 1.45; }
@media (max-width: 1200px) { .gfw.debug-console { width: min(100vw - 16px, 480px) !important; } }
@media (max-width: 700px) {
  .gfw.debug-console { left: 4px !important; top: 4px !important; width: calc(100vw - 8px) !important; }
  .gfw.debug-console > .gfw-body { height: calc(100dvh - 54px); }
  .dc-nav { flex-wrap: nowrap; overflow-x: auto; }
  .debug-console .dc-nav .gfw-tab { flex: none; }
}