.document-inspection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-width: 0;
  container-type: inline-size;
}
.document-inspection[data-info-open="true"] {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}
.document-inspection > .matter-viewer-heading {
  grid-column: 1 / -1;
  min-width: 0;
}
.document-reader,
.document-info-host {
  min-width: 0;
}
.document-info-host {
  position: sticky;
  top: 12px;
}
.document-info-toggle {
  white-space: nowrap;
  margin-bottom: 8px;
}
.matter-surface:not(.matter-embedded) .document-info-host > .document-info-toggle {
  margin-top: 32px;
}
.document-info-pane {
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}
.document-info-pane[hidden] {
  display: none;
}
.document-info-field + .document-info-field {
  border-top: 1px solid var(--line, #dce3ec);
  padding-top: 14px;
  margin-top: 14px;
}
.document-info-bates { border-bottom: 1px solid var(--line, #dce3ec); padding-bottom: 12px; margin-bottom: 14px; }
.document-info-bates h3 { font-size: 14px; margin: 0 0 6px; }
.bates-record + .bates-record, .bates-correction { border-top: 1px solid var(--line, #dce3ec); margin-top: 12px; padding-top: 10px; }
.bates-record p, .bates-history p { font-size: 12px; overflow-wrap: anywhere; }
.bates-record button, .bates-correction button { margin: 6px 12px 0 0; font-size: 12px; text-align: left; }
.document-info-field h3 {
  font-size: 14px;
  margin: 0 0 6px;
}
.document-info-value,
.document-info-explanation,
.document-info-source blockquote {
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 13px;
  margin: 8px 0;
}
.document-info-note,
.document-info-attribution,
.document-info-provenance {
  color: var(--muted, #52647d);
  font-size: 12px;
  line-height: 1.5;
}
.document-info-attribution {
  margin: 4px 0;
}
.document-info-source blockquote {
  border-left: 2px solid var(--line, #dce3ec);
  padding-left: 10px;
}
.document-info-source .text-button {
  font-size: 12px;
  white-space: normal;
  text-align: left;
}
.document-info-provenance,
.document-info-sources,
.document-info-original {
  margin-top: 10px;
}
.document-info-provenance summary,
.document-info-sources summary,
.document-info-original summary {
  cursor: pointer;
  font-size: 12px;
}
@container (max-width: 660px) {
  .document-reader:has(> .matter-viewer-heading) {
    display: contents;
  }
  .document-reader:has(> .matter-viewer-heading) > * {
    grid-column: 1 / -1;
  }
  .document-reader > .matter-viewer-heading,
  .document-inspection > .matter-viewer-heading {
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .matter-viewer-heading h2 {
    flex: 1 1 120px;
  }
  .document-reader,
  .document-info-toggle,
  .document-info-pane,
  .document-info-host {
    grid-column: 1 / -1;
  }
  .document-info-host {
    display: contents;
  }
  .document-info-toggle {
    grid-row: 1;
    justify-self: end;
    margin-bottom: 0;
  }
  .document-reader {
    grid-row: 3;
  }
  .document-inspection[data-info-open="false"] .document-reader {
    grid-row: 2;
  }
  .document-info-pane {
    grid-row: 2;
    max-height: 55dvh;
  }
}
@media (max-width: 700px) {
  .document-reader:has(> .matter-viewer-heading) {
    display: contents;
  }
  .document-reader:has(> .matter-viewer-heading) > * {
    grid-column: 1 / -1;
  }
  .document-reader > .matter-viewer-heading,
  .document-inspection > .matter-viewer-heading {
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .matter-viewer-heading h2 {
    flex: 1 1 120px;
  }
  .document-inspection,
  .document-inspection[data-info-open="true"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .document-info-host {
    display: contents;
  }
  .document-info-toggle {
    grid-row: 1;
    justify-self: end;
    margin-bottom: 0;
  }
  .document-reader {
    grid-row: 3;
  }
  .document-inspection[data-info-open="false"] .document-reader {
    grid-row: 2;
  }
  .document-info-pane {
    grid-row: 2;
    max-height: 55dvh;
  }
}

.matter-viewer-heading > .document-info-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  font-size: 10px;
}
.document-info-file {
  border-bottom: 1px solid var(--line, #dce3ec);
  padding-bottom: 12px;
  margin-bottom: 14px;
  font-size: 12px;
}
.document-info-file h3 { font-size: 14px; margin: 0 0 6px; }
.document-info-file p { margin: 7px 0; }