/*
 * ew_headerless.css -- Exoplanet Watch restoration overrides.
 *
 * sugar_cone.css assumes a fixed site header, a meganav and a footer sitemap.
 * The recreated pages ship without that chrome, so this sheet:
 *
 *   1. reclaims the vertical space those elements used to occupy;
 *   2. adds an .is_embedded mode for the iframe at science.nasa.gov;
 *   3. styles the two additions the restoration brief asked for -- the
 *      reduction heat map and the ten-column alphabetical target index;
 *   4. styles the Data Checkout keep-alive message region.
 *
 * Palette is taken straight from sugar_cone.css: #404f8d primary, #555 table
 * heads, #e7e7e7 rules, CooperHewitt display / Helvetica body.
 */

/* ------------------------------------------------------------------ *
 * 1. headerless page
 * ------------------------------------------------------------------ */

body.is_not_hds {
  background-color: #fff;
}

/* sugar_cone pads #page down to clear the fixed header; nothing is fixed now. */
#main_container > #site_body > .mb_page#page {
  padding-top: 0;
}

.mb_page#page > .header_mask {
  display: none;
}

/* The first content section carried the header's shadow gap. */
.mb_page#page > .content_page.module:first-of-type,
.mb_page#page > .page_cover + .header_mask + .content_page.module {
  padding-top: 1.5rem;
}

/* Print sheet hides these; without a header they are dead weight on screen. */
#sticky_nav_spacer,
.chertools_floater,
.site_header_area,
#site_footer {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * 2. iframe / embedded mode
 * ------------------------------------------------------------------ */

body.is_embedded,
body.is_embedded #main_container,
body.is_embedded #site_body,
body.is_embedded .mb_page#page {
  background: transparent;
}

body.is_embedded .mb_page#page > .content_page.module {
  padding-top: 0;
  padding-bottom: 0;
}

body.is_embedded #page_header {
  margin-bottom: 1rem;
}

/* Never let an embed introduce a horizontal scrollbar in the host page. */
body.is_embedded {
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ *
 * 3a. reduction heat map
 * ------------------------------------------------------------------ */

.ew_heatmap_section {
  margin: 2.5em 0;
}

/* Centred, and only ever a portion of the viewport so the ten-column index
 * below it stays visible without scrolling past a full-height graphic. */
.ew_heatmap_frame {
  display: flex;
  justify-content: center;
  width: 100%;
}

.ew_heatmap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* The SVG carries a viewBox and preserveAspectRatio="xMidYMid meet", so
 * clamping its height scales the drawing down rather than cropping it -- the
 * map keeps to part of the viewport and the ten-column index stays reachable. */
.ew_heatmap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;
}

/* Scaled to phone width the labels stop being readable, so hold a floor and
 * let the frame scroll instead. */
@media (max-width: 700px) {
  .ew_heatmap_frame {
    overflow-x: auto;
    justify-content: flex-start;
  }
  .ew_heatmap {
    min-width: 560px;
  }
}

.ew_heatmap .ew_heatmap_axis text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  fill: #555;
}

.ew_heatmap .ew_heatmap_row_label {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  fill: #333;
}

.ew_heatmap .ew_heatmap_row_label a:hover text,
.ew_heatmap a:hover .ew_heatmap_row_label {
  fill: #404f8d;
  text-decoration: underline;
}

.ew_heatmap .ew_heatmap_cell {
  stroke: #fff;
  stroke-width: 1px;
}

.ew_heatmap .ew_heatmap_cell_value {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  text-anchor: middle;
  pointer-events: none;
}

.ew_heatmap .ew_heatmap_legend text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  fill: #555;
}

.ew_heatmap_empty {
  padding: 1.5em;
  text-align: center;
  color: #555;
  border: 3px solid #e7e7e7;
}

.ew_heatmap_note {
  max-width: 720px;
  margin: .75em auto 0;
  font-size: .85em;
  color: #666;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * 3b. ten-column alphabetical target index
 * ------------------------------------------------------------------ */

.ew_target_index {
  margin: 2.5em 0;
}

.ew_target_index_table {
  table-layout: fixed;
}

.ew_target_index_table td {
  width: 10%;
  padding: 6px 8px;
  font-size: .8em;
  vertical-align: top;
  border-bottom: 1px solid #f0f0f0;
}

/* Ten equal columns are narrow, and the brief asks for the full display name.
 * Wrap the long ones (CoRoTID 223977153 b, EPIC 206042996 c) rather than
 * truncating them -- sugar_cone's td a { word-break: break-word } would split
 * mid-token, so break on the spaces and hyphens the names already have. */
.ew_target_index_table td,
.ew_target_index_table td a {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Ten columns do not fit a phone; fall back progressively. The wrapper that
 * mb_table_wrapper.js adds keeps the overflow scrollable either way. */
@media (max-width: 1024px) {
  .ew_target_index_table td { font-size: .75em; }
}

/* ------------------------------------------------------------------ *
 * 4. Data Checkout keep-alive message region
 * ------------------------------------------------------------------ */

.checkout_message_region {
  margin-top: 1.5em;
}

.checkout_message_region:empty {
  margin-top: 0;
}

.checkout_keepalive {
  display: flex;
  align-items: center;
  gap: .75em;
  padding: 1rem 1.2rem;
  border: 3px solid #e7e7e7;
  color: #555;
}

.checkout_keepalive_text {
  font-size: .95em;
}

.checkout_spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 3px solid #dfe2ee;
  border-top-color: #404f8d;
  border-radius: 50%;
  animation: ew_spin 900ms linear infinite;
}

@keyframes ew_spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .checkout_spinner { animation-duration: 0s; }
}

.checkout_message {
  padding: 1rem 1.2rem;
  border: 3px solid #e7e7e7;
}

.checkout_message.is_complete {
  border-color: #404f8d;
}

.checkout_message.is_error {
  border-color: #df4f34;
  color: #df4f34;
}

.checkout_message h2 {
  margin-top: 0;
}

.checkout_reference {
  margin-top: .75em;
  font-family: 'courier new', monospace;
  font-size: .9em;
  color: #555;
}

/* The React component alerted on failure; the recreation renders errors in
 * page, matching #error_list from shared/partials/_forms.scss. */
.checkin .message_form > ul {
  margin-bottom: 1em;
  color: #df4f34;
  list-style: none;
  padding-left: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Content-Security-Policy: replacements for inline style attributes
 *
 * The host serves `style-src 'self'`, which blocks style attributes outright
 * (hashes do not apply to them without 'unsafe-hashes').  Both values the
 * templates used to inline are fixed, so they live here instead.  URLs are
 * resolved relative to this stylesheet, so they hold under every LINK_STYLE.
 * ------------------------------------------------------------------ */

/* was: <article class="guild_navigator_canvas" style="background-image: url(…/gasgiant.jpg)"> */
.guild_navigator_canvas.has_backdrop {
  background-image: url(../img/gasgiant.jpg);
  background-size: cover;
  background-position: center;
}

/* was: <iframe class="mb_iframe" style="height: 400px;"> */
.mb_iframe_container.column-width .mb_iframe {
  height: 400px;
  width: 100%;
  border: 0;
}

/* Without fancybox (ENABLE_LIGHTBOX = False) the figure is a plain link to the
 * full-size image.  Keep the affordance the lightbox used to give. */
.no_lightbox figure.lede a,
.no_lightbox .inline_image_enlarge {
  display: inline-block;
  cursor: zoom-in;
}