.sa-viewer {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 380px;
  gap: 1.25rem;
  align-items: start;
}

.sa-viewer__toc,
.sa-viewer__findings {
  position: sticky;
  top: calc(var(--sa-topbar-height) + 1rem);
  max-height: calc(100vh - var(--sa-topbar-height) - 2rem);
  overflow-y: auto;
}

.sa-viewer__toc-link {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--sa-radius-sm);
  font-size: 0.85rem;
  color: var(--sa-text-secondary);
}

.sa-viewer__toc-link:hover {
  background: var(--sa-surface-secondary);
}

.sa-viewer__toc-badge {
  float: right;
  font-size: 0.7rem;
}

.sa-document-text {
  font-family: var(--sa-font-serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--sa-text);
}

.sa-document-text h2, .sa-document-text h3 {
  font-family: var(--sa-font-sans);
  font-size: 1.15rem;
  margin-top: 1.75rem;
}

.sa-document-text .sa-fragment {
  margin-bottom: 1rem;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  scroll-margin-top: calc(var(--sa-topbar-height) + 1rem);
}

.sa-document-text .sa-fragment--table {
  font-family: var(--sa-font-sans);
  font-size: 0.85rem;
  background: var(--sa-surface-secondary);
  border-radius: var(--sa-radius-sm);
  padding: 0.6rem 0.75rem;
}

.sa-fragment[data-severity="critical"] { background: rgba(220,38,38,.06); border-left: 3px solid var(--sa-severity-critical); }
.sa-fragment[data-severity="high"] { background: rgba(234,88,12,.06); border-left: 3px solid var(--sa-severity-high); }
.sa-fragment[data-severity="medium"] { background: rgba(217,119,6,.06); border-left: 3px solid var(--sa-severity-medium); }
.sa-fragment[data-severity="low"] { background: rgba(2,132,199,.06); border-left: 3px solid var(--sa-severity-low); }
.sa-fragment[data-severity="info"] { border-left: 3px solid var(--sa-severity-info); }
.sa-fragment.is-selected { outline: 2px solid var(--sa-primary); outline-offset: 2px; }

.sa-fragment__page {
  font-size: 0.7rem;
  color: var(--sa-text-muted);
  font-family: var(--sa-font-sans);
}

@media (max-width: 1199.98px) {
  .sa-viewer {
    grid-template-columns: 1fr;
  }
  .sa-viewer__toc, .sa-viewer__findings {
    position: static;
    max-height: none;
  }
}