/* debug.css — the root-mounted debug console (owner: S1).

   Loaded by base.html after studio.css, on every page.  The panel lives
   outside the page shell, floats above it and must not steal space from the
   mini player, so it is anchored with the same glass tokens the rest of the
   shell uses (—glass-bg / —glass-border / —glass-blur) rather than with
   colours of its own; both themes then follow from design-tokens.css.

   Sized in characters rather than pixels: this is a log, its unit of width is
   the character, and 52ch is the point at which a method + path + status fits
   on one line.  The clamp keeps it inside a phone viewport without a media
   query, which is also why there is no breakpoint below.

   No colour or length literals live in this file (the ad-hoc-CSS ratchet in
   tests/test_design_tokens.py counts them on this sheet — it is not one of the
   token sheets), so every value below is a var() or a relative unit. */

.debug-console {
  position: fixed;
  inset-block-end: calc(var(--space-lg) + var(--space-md));
  inset-inline-end: var(--space-lg);
  z-index: var(--z-overlay);
  display: grid;
  /* One column, clamped: without minmax(0, 1fr) the widest child (a long tab
     label, a long URL) sets the panel's intrinsic width and the log spills
     past the panel and off the viewport instead of wrapping. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: var(--space-2xs);
  inline-size: min(52ch, calc(100vw - (var(--space-lg) * 2)));
  block-size: 34vh;
  max-block-size: calc(100vh - var(--space-3xl));
  padding: var(--space-xs);
  color: var(--color-text);
  background: var(--glass-bg);
  border: var(--hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  overscroll-behavior: contain;
}

/* The UA sheet's [hidden] is a single class of specificity; a grid display
   would beat it, so the closed state is stated here. */
.debug-console[hidden] {
  display: none;
}

.debug-console[data-expanded="true"] {
  block-size: 72vh;
}

/* ── header: the drag handle and the six controls ─────────────────────── */

.debug-console-header,
.debug-console-tabs,
.debug-console-log,
.debug-console-empty,
.debug-console-status {
  min-inline-size: 0;
}

.debug-console-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-md);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.debug-console-header:active {
  cursor: grabbing;
}

.debug-console-grip {
  flex: none;
  inline-size: var(--space-md);
  block-size: var(--space-2xs);
  border-block-start: var(--hairline) solid var(--border-strong);
  border-block-end: var(--hairline) solid var(--border-strong);
  opacity: 0.7;
}

.debug-console-ident {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-inline-size: 0;
}

.debug-console-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.debug-console-counts {
  display: flex;
  gap: var(--space-3xs);
}

.debug-count {
  min-inline-size: var(--space-md);
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  text-align: center;
  color: var(--color-text-muted);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
}

.debug-count::before {
  content: attr(data-abbr);
  margin-inline-end: var(--space-3xs);
  color: var(--color-text-muted);
}

.debug-count[data-empty="false"] {
  color: var(--color-text);
  background: var(--surface-tint);
}

/* Seven controls do not fit beside the title in a 52ch panel, so the action
   row wraps onto its own line rather than squeezing the labels into each
   other. */
.debug-console-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  margin-inline-start: auto;
}

.debug-console-btn {
  min-block-size: var(--space-lg);
  min-inline-size: var(--space-lg);
  padding-inline: var(--space-2xs);
  color: var(--color-text-secondary);
  background: transparent;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.debug-console-btn:hover {
  color: var(--color-text);
  background: var(--surface-tint);
  border-color: var(--glass-border);
}

.debug-console-btn[aria-pressed="true"] {
  color: var(--color-accent);
  background: var(--color-accent-dim);
}

.debug-console-btn:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--focus-ring);
}

/* ── the tab strip: six tabs over five stored categories ──────────────── */

.debug-console-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
}

.debug-tab {
  flex: none;
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-text-muted);
  background: transparent;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xs);
  white-space: nowrap;
  cursor: pointer;
}

.debug-tab:hover {
  color: var(--color-text);
  background: var(--surface-tint);
}

.debug-tab.is-current {
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border-color: var(--glass-border);
}

.debug-tab:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--focus-ring);
}

/* ── the rows ─────────────────────────────────────────────────────────── */

.debug-console-log {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--space-3xs);
  overflow-y: auto;
  padding: var(--space-2xs);
  background: var(--surface-tint);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  overscroll-behavior: contain;
}

.debug-row {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  line-height: var(--line-height-normal);
}

.debug-row:hover {
  background: var(--surface-tint-strong);
}

.debug-row-time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.debug-row-age {
  min-inline-size: var(--space-lg);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.debug-row-cat {
  padding-inline: var(--space-3xs);
  color: var(--color-text-secondary);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.debug-row-cat--api {
  color: var(--color-info);
}

.debug-row-cat--ai {
  color: var(--color-accent);
}

.debug-row-cat--spotify {
  color: var(--color-success);
}

.debug-row-cat--hindsight {
  color: var(--color-purple);
}

.debug-row-cat--error {
  color: var(--color-danger);
  border-color: var(--color-danger-dim);
}

.debug-row-body {
  display: grid;
  gap: var(--space-2xs);
  min-inline-size: 0;
  text-align: start;
}

.debug-row-msg,
.debug-row-detail {
  overflow-wrap: anywhere;
}

.debug-row-msg {
  color: var(--color-text);
}

.debug-row-detail {
  color: var(--color-text-muted);
}

/* The timestamp column is a choice, not a fixture: once the ages are on
   screen the clock is noise on a narrow panel. */
.debug-console[data-times="false"] .debug-row-time {
  display: none;
}

/* ── empty state and status line ──────────────────────────────────────── */

.debug-console-empty,
.debug-console-status {
  margin: 0;
  padding-inline: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

.debug-console-empty {
  align-self: center;
  text-align: center;
}

.debug-console-status:empty {
  display: none;
}

/* ── paused / collapsed ───────────────────────────────────────────────── */

.debug-console[data-paused="true"] .debug-row-age {
  opacity: 0.5;
}

.debug-console[data-collapsed="true"] {
  block-size: auto;
  grid-template-rows: auto;
}

.debug-console[data-collapsed="true"] .debug-console-tabs,
.debug-console[data-collapsed="true"] .debug-console-log,
.debug-console[data-collapsed="true"] .debug-console-empty,
.debug-console[data-collapsed="true"] .debug-console-status {
  display: none;
}

/* The off-screen helper the legacy copy path appends while it selects. */
.debug-console-clipboard {
  position: fixed;
  inset-block-start: -100vh;
  inline-size: var(--space-3xl);
}