html.compare-pane,
html.compare-pane body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #071015;
}

html.compare-pane #launchIntro,
html.compare-pane #onboardingPanel,
html.compare-pane .library-head,
html.compare-pane .library-nav,
html.compare-pane .library-case-meta,
html.compare-pane .library-heart-mode-toggle,
html.compare-pane .library-heart-expand-button,
html.compare-pane .library-conduction-controls,
html.compare-pane .library-heart-2d-controls,
html.compare-pane .library-heart-marker-key,
html.compare-pane .library-heart-marker-shortcut,
html.compare-pane .library-strip-controls,
html.compare-pane .library-metrics,
html.compare-pane .library-clinical-panel,
html.compare-pane .library-related-panel {
  display: none !important;
}

html.compare-pane .library-panel {
  inset: 0;
  border: 0;
  background: #071015;
}

html.compare-pane .library-dialog {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html.compare-pane .library-layout {
  display: block;
  width: 100%;
  height: 100%;
}

html.compare-pane .library-detail,
html.compare-pane .library-detail.has-heart-markers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 760px 306px;
  grid-template-areas:
    "heart"
    "strip";
  align-content: start;
  width: 100%;
  height: 100%;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}

html.compare-pane .library-summary {
  display: none;
}

html.compare-pane .library-heart-card {
  position: relative;
  /* Match the tallest Library teaching card so either ECG starts at the
     same position, even when only one case has extended attribution. */
  height: 760px !important;
  min-height: 0;
}

html.compare-pane .library-heart-scene {
  min-height: 0;
}

html.compare-pane .library-heart-2d-scene {
  padding: 24px 10px 16px;
}

html.compare-pane .library-strip {
  min-height: 0;
  height: 306px;
  grid-template-rows: 44px 260px;
}

html.compare-pane .library-strip-head {
  min-height: 0;
  height: 44px;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 5px 8px;
}

html.compare-pane .library-strip-title {
  flex-basis: auto;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

html.compare-pane .library-strip-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.compare-pane .library-strip-title #libraryRateLabel {
  flex: 0 1 auto;
  white-space: nowrap;
}

html.compare-pane #libraryCanvas {
  height: 260px;
  min-height: 260px;
}

@media (max-width: 700px) {
  html.compare-pane .library-detail,
  html.compare-pane .library-detail.has-heart-markers {
    grid-template-rows: 960px 306px;
  }

  html.compare-pane .library-heart-card {
    height: 960px !important;
  }
}

@media (max-width: 360px) {
  html.compare-pane .library-detail,
  html.compare-pane .library-detail.has-heart-markers {
    grid-template-rows: 1040px 306px;
  }

  html.compare-pane .library-heart-card {
    height: 1040px !important;
  }
}