/* ==========================================================================
   Preview — the page embedded in the 16:9 frame of the component sheet.

   The component has a ratio of 993/540, i.e. 1.839; the frame is 16:9, i.e.
   1.778. It is the width that constrains: the map therefore takes up the whole
   width of the frame and centres vertically, exactly as the reference does in
   its own container.

   This page is not a site: it is a frame. On a site, "narrow screen" means "a
   phone", and the panel is right to fold onto two rows. Here, narrow means
   "small frame" — folding would amount to showing something other than the
   component. So the original composition is kept and the scale is fitted to the
   space available.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  /* Without this the body's padding adds to its 100% height: the component is
     centred in an area taller than the frame and ends up pushed down by the
     whole of the top padding. */
  box-sizing: border-box;
}

body {
  background: #13141a;
}

.wma {
  /* The scale follows the width of the frame. No cap, and that is the important
     point: at a constant width in em the composition is identical at every size
     — the same relative panel width, the same line breaks. A min() would break
     that property.

     134.4 is the ratio surveyed on the reference: 1209.6 px of map for a panel
     body size of 9 px. The panel then takes up 63% of the width, as on the
     original visual. */
  --wma-font-size: calc(100vw / 134.4);
}

/* --------------------------------------------------------------------------
   The component's breakpoints, neutralised for the preview.

   This file is loaded after world-map-arc.css: at equal specificity these rules
   win over the ones in its media queries. That is deliberate, and it is the only
   place where we allow ourselves to contradict the component.
   -------------------------------------------------------------------------- */

.wma__panel {
  flex-wrap: nowrap;
}

.wma__rule {
  display: block;
}

.wma__section {
  flex: 0 0 auto;
  padding: 1.5556em 3.1112em;
  border-top: none;
}

.wma__info {
  width: 24.2223em;
}