.analyzer {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-4);
  align-items: start;
}

.main-area {
  background: var(--color-surface-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* Steps inside the main card are plain stacks, not nested cards —
   reset the shared .section surface treatment. */
.main-area .section {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--space-4);
}

.main-area .section:hover {
  background: none;
}

.main-area .section:last-child {
  margin-bottom: 0;
}

.file-input-label {
  padding: var(--space-5) var(--space-3);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-section {
  background: var(--color-surface-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.sidebar-section .btn {
  width: 100%;
  margin-top: var(--space-2);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Sidebar sections are the page's second level, so they are h2 for heading
   order — an h1 followed by an h3 is what Lighthouse flags. The h3 type scale
   is the size that actually fits the sidebar, so it is restated here rather
   than inherited from the global h2 rule. */
.sidebar-section h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.section-heading h2 {
  margin-bottom: 0;
}

/* Smaller than the standard chip so it reads as an annotation on the
   heading rather than a second heading. */
.chip.beta {
  padding: 1px 8px;
  font-size: 0.625rem;
  line-height: 14px;
  text-transform: uppercase;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  font-size: 0.9rem;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  color: var(--color-text-muted);
  cursor: help;
  position: relative;
  border-bottom: 1px dotted var(--color-border-accent);
}

.info-label:hover {
  border-bottom-color: var(--color-signal);
}

.info-label:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 0;
  background: var(--color-surface-high);
  border: 1px solid var(--color-signal);
  border-radius: var(--radius);
  padding: var(--space-1);
  font-size: 0.8rem;
  color: var(--color-text);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

.info-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-signal);
}

.info-value.score {
  font-size: 1rem;
  font-weight: 600;
}

.score-note {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.score-findings {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.score-findings li {
  position: relative;
  padding-left: var(--space-2);
}

.score-findings li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-signal);
}

/* Spectrogram */

.spectrogram-wrapper {
  position: relative;
  display: flex;
  gap: var(--space-1);
}

.spectrogram-labels-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  text-align: right;
  padding: 4px 0;
}

.spectrogram-labels-y div {
  flex: 0;
}

.spectrogram-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.spectrogram-container {
  background: var(--color-surface-lowest);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.spectrogram-labels-x {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  margin-top: 4px;
  padding-left: 58px;
}

.spectrogram-labels-x div {
  flex: 0;
}

.spectrogram-tooltip {
  position: absolute;
  background: var(--color-surface-high);
  border: 1px solid var(--color-signal);
  border-radius: var(--radius-md);
  padding: var(--space-1) 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-signal);
  pointer-events: none;
  display: none;
  z-index: 10;
  white-space: nowrap;
}

.spectrogram-tooltip.active {
  display: block;
}

.spectrogram-legend {
  margin-top: var(--space-2);
}

.legend-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-1);
}

/* Scientific blue-to-red magnitude ramp. This is data encoding, not brand
   colour, and is the one documented exception to the no-gradient rule. */
.legend-bar {
  display: flex;
  height: 20px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(to right, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
  margin-bottom: 4px;
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
}

.placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-dim);
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: var(--space-1);
}

.placeholder-text {
  color: var(--color-text-dim);
  font-size: 0.95rem;
}

.loading-indicator {
  display: none;
  text-align: center;
}

.loading-indicator.active {
  display: block;
}

.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-surface-highest);
  border-top-color: var(--color-signal);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-2);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Display controls */

.frequency-scale {
  margin-top: var(--space-1);
}

.frequency-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  margin-bottom: var(--space-1);
}

.frequency-buttons {
  display: flex;
  gap: var(--space-1);
}

/* Desktop-only notice */

.mobile-warning {
  display: none;
  background: rgba(105, 0, 5, 0.25);
  border: 1px solid rgba(255, 180, 171, 0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  text-align: center;
}

.mobile-warning.show {
  display: block;
}

.mobile-warning.show ~ .tool-header,
.mobile-warning.show ~ .analyzer {
  display: none;
}

.mobile-warning h2 {
  color: var(--color-error);
  margin: 0 0 var(--space-1) 0;
  font-size: 1.1rem;
}

.mobile-warning p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .analyzer {
    grid-template-columns: 1fr;
  }

  .main-area {
    padding: var(--space-3);
  }

  .sidebar-section {
    padding: var(--space-2);
  }

  .info-row {
    font-size: 0.8rem;
  }

  .file-input-icon {
    font-size: 1.5rem;
  }

  .file-input-text {
    font-size: 0.85rem;
  }

  .spectrogram-labels-y {
    width: 40px;
    font-size: 0.65rem;
  }

  .spectrogram-labels-x {
    padding-left: 48px;
  }

  .spectrogram-container {
    min-height: 200px;
  }
}