/* ===== CRASH REPORT ANALYZER (page-specific) ===== */
/* Everything here is scoped to this tool; shared tokens live in style.css. */

/* Hero: crash-log echo of the homepage boot-log motif. The error line uses
   the semantic error red, matching how consoles print it. */
.boot-line.err {
  color: var(--error);
}

/* Tighter hero rhythm inside the 700px tool column.
   Scoped to this page's structure; this stylesheet is only loaded by
   crash-analyzer.html. */
main > .hero {
  padding: 10px 8px 34px 8px;
}

/* Intake: the paste area and the drop zone are one surface (#uploadArea) */
.crash-intake {
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.5rem 1.25rem;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.crash-intake.drag-over {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  box-shadow: 0 4px 24px rgba(var(--primary-rgb), 0.13);
}

.crash-intake label {
  display: block;
}

.crash-intake textarea {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
  background: var(--background);
  min-height: 280px;
  margin-bottom: 0.4rem;
}

.crash-intake textarea::placeholder {
  color: var(--text-secondary);
}

.intake-help {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 1rem 0;
}

/* Browse button with the native file input overlaid on top of it */
.crash-intake .file-input-wrapper {
  position: relative;
  display: inline-block;
}

.crash-intake .file-input-button {
  margin: 0;
}

.crash-intake .file-input-wrapper input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0; /* Prevents a large clickable area flash on some browsers */
}

/* Actions: left-aligned console row, primary action dominant */
.action-buttons {
  justify-content: flex-start;
  margin-top: 1.5rem;
}

#analyzeBtn {
  font-size: 1.05rem;
  padding: 12px 22px;
}

/* Raw log view: mono, bounded height, scrolls both axes */
#highlightedOutput {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  max-height: 55vh;
  overflow: auto;
  margin-top: 1.5rem;
}

/* Neutralize the global inline-code styling inside the log view */
#highlightedOutput code {
  background: none;
  color: var(--text-primary);
  padding: 0;
  font-size: inherit;
}

/* Modal scroll should not chain to the page behind it */
#historyModal {
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  .crash-intake textarea {
    min-height: 200px;
  }

  #analyzeBtn {
    width: 100%;
  }
}