/*
 * components/log_viewer.css — Log viewer component (Session 5: UI Lab).
 *
 * Paired with templates/components/log_viewer.html and
 * static/js/components/log-viewer.js. Dark terminal theme with level
 * coloring. Token-driven (D5) except the terminal background which is a
 * deliberate dark-surface constant.
 */

.log-viewer {
  border: var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 50rem;
}

.log-viewer__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-bottom: var(--border-1);
}

.log-viewer__search {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  border: var(--border-1);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-sm);
  min-width: 10rem;
}

.log-viewer__search:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}

.log-viewer__output {
  background: var(--color-terminal-bg);
  color: var(--color-terminal-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  max-height: 18rem;
  overflow: auto;
  padding: var(--space-3) var(--space-4);
  white-space: pre-wrap;
}

.log-viewer__line--warn { color: var(--color-terminal-warn); }
.log-viewer__line--error { color: var(--color-terminal-error); }
.log-viewer__line--debug { color: var(--color-terminal-muted); }
.log-viewer__line--hidden { display: none; }

.log-viewer__empty {
  color: var(--color-terminal-muted);
  font-style: italic;
  padding: var(--space-2) 0;
}

/* -- WP3: intro + plain-language summary + live follow ------------------- */

.log-viewer__intro {
  max-width: 50rem;
  margin: 0 0 var(--space-3);
  color: var(--color-fg-muted);
  font-size: var(--fs-sm);
}

.log-viewer__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-bottom: var(--border-1);
}

.log-viewer__summary--ok { background: var(--color-success-bg); color: var(--color-success-fg); }
.log-viewer__summary--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.log-viewer__summary--error { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.log-viewer__summary--muted { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }

/* Live indicator: a small dot that pulses while the follow poll is active. */
.log-viewer__live {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-fg);
  opacity: 0.5;
}

.log-viewer__live.is-live {
  background: var(--color-success-fg);
  opacity: 1;
  animation: log-live-pulse 1.6s ease-in-out infinite;
}

@keyframes log-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .log-viewer__live.is-live { animation: none; }
}

/* Collapsed-by-default disclosure: the summary leads, raw lines on demand. */
.log-viewer__disclosure-summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-bottom: var(--border-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent);
  list-style-position: inside;
}

.log-viewer__disclosure-summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.log-viewer__disclosure[open] .log-viewer__disclosure-summary {
  border-bottom: var(--border-1);
}