.content-grid {
  grid-template-columns: 1fr;
  align-items: start;
}

.content-main-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.35fr)
    minmax(0, 1.05fr);
  gap: 18px;
  min-width: 0;
  align-items: start;
}

.content-column {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.diff-panel,
.output-panel-wide {
  grid-column: 1 / span 3;
  min-width: 0;
}

.content-column-timeline {
  min-width: 0;
}

@media (min-width: 1680px) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 420px);
  }

  .content-column-timeline .timeline-panel {
    position: sticky;
    top: 22px;
    max-height: calc(100vh - 44px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-color: rgba(106, 135, 205, 0.24);
    background: rgba(12, 20, 33, 0.94);
    box-shadow:
      0 12px 30px rgba(4, 8, 17, 0.2),
      inset 0 1px 0 rgba(143, 176, 255, 0.05);
  }

  .content-column-timeline .timeline-panel .section-body {
    min-height: 0;
    overflow: auto;
    padding-right: 12px;
    scrollbar-gutter: stable;
  }

  .content-column-timeline .timeline-panel .section-header {
    padding-bottom: 10px;
    border-bottom-color: rgba(106, 135, 205, 0.18);
  }

  .content-column-timeline .timeline-panel .section-title {
    font-size: 30px;
    letter-spacing: -0.03em;
  }
}
