/* Chart detail page additions (templates/chart_detail.html).
   Kept apart from styles.css, which is copied from each og-php revision. */

/* A chart with no second version: one card, centered */
.chart-versions--single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

/* No chart image yet */
.chart-preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #eef2f4;
  color: #5c6b73;
  cursor: default;
}
/* NGA restricted region: thumbnail only, no zoom */
.chart-preview--restricted {
  cursor: default;
}
.chart-restricted {
  margin-top: 8px;
  font-size: 14px;
  color: #5c6b73;
}

.chart-notice {
  margin-top: 26px;
  font-weight: 700;
  color: var(--navy);
}
.chart-notice + .chart-specs {
  margin-top: 8px;
}
.chart-footnote {
  margin-top: 10px;
  font-size: 14px;
  color: #5c6b73;
}

/* Preview linking to the zoom page (charts with tiles). Same look as styles.css's .chart-preview,
   under its own class because main.js opens the image popup for every .chart-preview */
.chart-zoom-link {
  position: relative;
  display: block;
  max-width: 442px;
  margin-top: 22px;
  border: 1px solid #8a9aa3;
  cursor: zoom-in;
}
.chart-zoom-link img {
  width: 100%;
}
.chart-zoom-link:hover .chart-preview-icon,
.chart-zoom-link:focus-visible .chart-preview-icon {
  background-color: var(--navy);
}

/* Zoom page (templates/chart_zoom.html): title bar, then the viewer to the window bottom */
.chart-zoom-bar {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 10px 20px;
  background: var(--navy);
  color: var(--white);
}
.chart-zoom-bar a {
  color: var(--white);
  white-space: nowrap;
}
.chart-zoom-bar h1 {
  font-size: 18px;
  font-weight: 500;
}
.chart-zoom-viewer {
  width: 100%;
  height: 80vh; /* replaced by the exact remaining window height on load */
}

/* Search by Chart Number page (templates/search_by_chart_number.html) */
.chart-number-main {
  padding: 64px 0 100px;
}
.chart-number-search {
  max-width: 420px;
}
.chart-number-results {
  margin-top: 28px;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}
.chart-number-results li + li {
  margin-top: 8px;
}
.chart-number-results strong {
  display: inline-block;
  min-width: 120px;
}
.chart-number-none {
  margin-top: 28px;
}