/* The mood's breakdown sheet (js/ui/mood-why.js): the big number, the main problem, a row for each thing that pulls the mood
   down or lifts it (name, size, who it hits, what to do, Show), the prices and the park rating's terms. */
.panel[data-kind='mood'] h4 {
  margin: 14px 0 2px;
}
.mwhead {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mwhead b {
  font: 400 36px/1 var(--display);
}
.mwcause {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(239, 90, 60, 0.14);
  border: 2px solid rgba(239, 90, 60, 0.4);
}
.mwcause .btn {
  flex: none;
  margin-left: auto;
}
.mwr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px dashed rgba(58, 38, 18, 0.28);
}
.mwr > :not(.btn) {
  grid-column: 1;
}
.mwr > .btn {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}
.mwl {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.mwv {
  font-weight: 700;
  white-space: nowrap;
}
.mwv.down {
  color: var(--bad);
}
.mwv.up {
  color: var(--leaf);
}
.mwr small {
  line-height: 1.25;
}