/* The "?" that tells how a figure is computed (templates/_why.html.twig,
   orders.js why()): a brass ring, its bubble on hover or once tapped (focus, .open),
   placed on the screen by jeu/js/why.js.
   Shared by the side panel, the classic pages, the catalogue's sheets and
   the map: its own colors, whatever the page's */

.sc-why {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border: 1px solid #8a6d3b;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #d8b56a;
  font: bold 10px/1 Verdana, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: 1px;
  cursor: help;
}
.sc-why::before { content: '?'; }
.sc-why:hover, .sc-why:focus { border-color: #d8b56a; color: #f3d48c; outline: none; }

.sc-why-pop {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: -8px;
  width: max-content;
  max-width: min(520px, calc(100vw - 16px));
  padding: 7px 10px;
  border: 1px solid #8a6d3b;
  background: #15130f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75);
  color: #e6dcc4;
  font: normal 11px/1.5 Verdana, sans-serif;
  text-align: left;
  white-space: normal;
  cursor: auto;
}
.sc-why-pop > span { display: block; }
/* Its first line (the rule) wraps within the width of the others, which
   each keep to one line when the screen allows */
.sc-why-pop > span:first-child:not(:only-child) { contain: inline-size; }
.sc-why-pop b { font-weight: bold; }
.sc-why-pop b.up { color: #8fe6bf; }
.sc-why-pop b.down { color: #ffb4a8; }
.sc-why-pop > span + span { margin-top: 3px; }
.sc-why.start .sc-why-pop { right: auto; left: -8px; }
.sc-why:hover .sc-why-pop, .sc-why:focus .sc-why-pop, .sc-why.open .sc-why-pop { display: block; }
/* Out of a window that would cut it (why.js lift) */
.sc-why-pop.lifted { display: block; z-index: 1000; }