/* ---- the premium mosaic -------------------------------------------------
   Four numbers in four boxes made you read and compare. Area makes you see.
   A treemap was the wrong form: these four values are a 2x2 with real axes
   (downside vs upside, bought vs sold) and a treemap discards that structure
   to pack rectangles. A mosaic keeps both axes and stays exactly proportional
   — column width is the column's share, cell height is that column's internal
   split, so width x height is each cell's true share of the whole. Verified
   against the API: rendered areas 44.2 / 31.8 / 16.0 / 8.0 against actual
   44.3 / 31.7 / 16.0 / 8.0. */
.ms { display: flex; gap: 10px; margin: 16px 0 14px; }
.ms-col { flex: 0 0 calc(var(--w) - 5px); min-width: 0;
  display: flex; flex-direction: column; }

/* The header sits ABOVE the stack, in its own row. It used to be a flex child
   of the same column as the cells, which stole height from them and made the
   two columns' rectangles no longer comparable. */
.ms-col-h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 0 2px 7px; font: 11px/1 var(--mono); }
.ms-col-h b { color: var(--ink); font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; }
.ms-col-h i { color: var(--ink3); font-style: normal; }

/* Fixed height on the STACK, not the column, so both columns measure their
   percentages against the same 320px and the areas stay honest. */
.ms-stack { height: 320px; display: flex; flex-direction: column; gap: 4px; }

.ms-c { flex: 0 0 calc(var(--h) - 2px); min-height: 0; overflow: hidden;
  border-radius: 7px; padding: 11px 13px; cursor: help;
  display: flex; flex-direction: column; justify-content: space-between; }

/* Two DIRECTIONS, so two hues — not one hue at two opacities, which reads as
   "more" and "less" of one thing rather than money going opposite ways. */
.ms-c.buy  { background: color-mix(in srgb, var(--mint) 20%, var(--bg));
             border: 1px solid color-mix(in srgb, var(--mint) 42%, transparent); }
.ms-c.sell { background: color-mix(in srgb, var(--good) 20%, var(--bg));
             border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); }
.ms-c:hover { filter: brightness(1.06); }

/* The figure leads, at the TOP-LEFT where the eye enters the rectangle. It was
   bottom-aligned, which left a tall block of empty colour above the only thing
   worth reading in it. */
.ms-top { display: flex; align-items: baseline; gap: 8px; }
.ms-v { font: 600 20px/1.1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ms-s { font: 11.5px/1 var(--mono); color: var(--ink2); font-style: normal; }

.ms-l { font: 11.5px/1.35 var(--mono); color: var(--ink2);
  display: flex; flex-direction: column; }
.ms-l em { font-style: normal; font-size: 10.5px; color: var(--ink3); }

/* Too short for three lines. Keeps its true height; the label moves to the
   hover. Shrinking the rectangle to fit text would break the one property
   this chart exists for. */
.ms-c.tiny { padding: 7px 11px; justify-content: center; }
.ms-c.tiny .ms-l { display: none; }
.ms-c.tiny .ms-v { font-size: 14px; }
.ms-c.tiny .ms-s { font-size: 10.5px; }

.ms-none { color: var(--ink3); font-size: 12.5px; line-height: 1.6;
  max-width: 64ch; padding: 14px 0; }

@media (max-width: 720px) {
  .ms-stack { height: 240px; }
  .ms-v { font-size: 16px; }
}