/* Share-price movement chip on article cards — companion to price-move.js.
 *
 * SHARED because the same treatment appears on the landing page and on
 * /insights, whose stylesheets are otherwise independent. One file means the
 * green/red/neutral vocabulary cannot drift between the two surfaces.
 *
 * ⚠️ THE WHOLE POINT IS THAT NOTHING GETS TALLER.
 *
 * `.mh-meta-row` is emitted INSIDE each card's existing meta element and
 * inherits font-size, colour and line-height from it, so every card keeps the
 * typography its own stylesheet gives it and no rule here sets a font-size.
 * The percentage sits on the SAME line as the date and company, and it is the
 * COMPANY NAME that yields when the row runs out of width — the date stays
 * legible and the percentage stays whole. A second line, a smaller font or a
 * taller row are all explicitly out of scope in the ticket, and each of them
 * is what you get if `.mh-meta-text` loses its `min-width: 0`.
 */

.mh-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  /* ⚠️ THE ROW MUST NOT BE ABLE TO WIDEN THE CARD.
     `white-space: nowrap` below gives `.mh-meta-text` a min-content width
     equal to the whole "date · Company Name" string, and card bodies are grid
     and flex items with the default `min-width: auto` — so that width
     propagates outward and sizes the TRACK. Measured on the drilling
     thumb-list at 380px: a long company name resolved the `1fr` column to
     388.9px and pushed the percentage 107px outside the card, with no
     truncation at all. Size containment in the inline axis severs that, so
     the card sizes the row rather than the row sizing the card, and it holds
     for every card using this component — including ones added later, which a
     per-card fix list would miss. `min-width: 0` / `overflow: hidden` /
     `flex-basis: 0` were all measured here and none of them do it. */
  contain: inline-size;
}

/* `min-width: 0` is load-bearing, not tidy-up: a flex item's automatic
   minimum size is its content size, so without it the company name refuses to
   shrink and the row overflows instead of the name being clipped. It is the
   INNER half of the pair — the containment on `.mh-meta-row` above is the
   outer half, and each is useless without the other. */
.mh-meta-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-pm {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  /* Fixed-width digits so a column of percentages doesn't jitter as values
     change on the live path. */
  font-variant-numeric: tabular-nums;
}

/* The arrow is a hair smaller than the figure and sits slightly high — at the
   meta row's 11-12px the raw glyph otherwise reads as heavier than the number
   it qualifies. `line-height: 1` keeps it from growing the row: the triangles
   have taller intrinsic line boxes than digits in several UI fonts. */
.mh-pm-arrow {
  margin-right: 3px;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: baseline;
}

.mh-pm--up { color: #16a34a; }
.mh-pm--down { color: #dc2626; }

/* Flat is a MEASURED zero, not missing data — an article with no usable
   session pricing renders no chip at all. Muted and arrowless so it reads as
   "no movement" rather than as a direction. */
.mh-pm--flat {
  color: inherit;
  opacity: 0.7;
  font-weight: 500;
}

/* On the image-overlay cards (landing hero, /insights hero) the meta sits on
   a dark photographic background, where the standard green and red are too
   dark to read. */
.lp-hero-main .mh-pm--up,
.lp-hero-tile .mh-pm--up,
.ins-hero-card .mh-pm--up { color: #4ade80; }

.lp-hero-main .mh-pm--down,
.lp-hero-tile .mh-pm--down,
.ins-hero-card .mh-pm--down { color: #f87171; }

.lp-hero-main .mh-pm--flat,
.lp-hero-tile .mh-pm--flat,
.ins-hero-card .mh-pm--flat { opacity: 0.85; }