/* mamacool use stats — "how mothers use their PeachCool" card for blog posts
   (theme-embedded, self-contained: never links brand.css). One bar per
   answer to a select review question, most common first.

   DESIGN.md roles: the card is the reviews widget's summary panel (cream,
   maroon hairline, 22px radius, 22/24 padding); the title is the question
   (.mc-q: Petrona 600 1.05rem / 1.35), rows are the answer (.mc-a: .85rem),
   the disclaimer is the hint (.8rem ink-soft, sentence case), bars are the
   distribution bar in the reviews wall's A2 colours (10px pill track, pink,
   maroon fill). Theme variables first, brand values as fallbacks.

   Every rule is scoped under .mcuse: the card sits inside the article's
   .rte, whose element rules (.rte h3 { margin: 1em 0 }, .rte p) would
   otherwise outrank a bare class. */
.mcuse {
  --mcu-peach: #fff5ea;
  --mcu-ink: var(--COLOR-HEADING, #0b0b0b);
  --mcu-ink-soft: rgba(11, 11, 11, .55);
  --mcu-maroon: #752329;
  --mcu-pink: #ffcfd8;
  --mcu-font: var(--FONT-STACK-BODY, "DM Sans", system-ui, sans-serif);
  --mcu-heading: var(--FONT-STACK-HEADING, "Petrona", Georgia, serif);
  --mcu-heading-bold: var(--FONT-WEIGHT-HEADING-BOLD, 600);
  --mcu-heading-track: var(--LETTER-SPACING-HEADING, -.025em);

  box-sizing: border-box;
  font-family: var(--mcu-font); color: var(--mcu-ink);
  background: var(--mcu-peach);
  border: 1px solid var(--mcu-maroon); border-radius: 22px;
  padding: 22px 24px; margin: 24px 0;
}
@media (max-width: 540px) { .mcuse { padding: 18px; } }
.mcuse[hidden] { display: none; }

/* the question, in the heading face */
.mcuse .mcuse__title {
  font-family: var(--mcu-heading); font-weight: var(--mcu-heading-bold); letter-spacing: var(--mcu-heading-track);
  font-size: 1.05rem; line-height: 1.35; margin: 0 0 14px; color: var(--mcu-ink);
}
.mcuse .mcuse__rows { display: grid; gap: 12px; }
.mcuse .mcuse__row { display: grid; gap: 5px; }
/* the answer; its share is a stat, so maroon */
.mcuse .mcuse__row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .85rem; line-height: 1.3; margin: 0; }
.mcuse .mcuse__pct { color: var(--mcu-maroon); font-weight: 500; white-space: nowrap; }
.mcuse .mcuse__track { height: 10px; border-radius: 999px; background: var(--mcu-pink); overflow: hidden; }
.mcuse .mcuse__track > i { display: block; height: 100%; border-radius: 999px; background: var(--mcu-maroon); }
/* the disclaimer, as hint */
.mcuse .mcuse__note { margin: 14px 0 0; font-size: .8rem; line-height: 1.45; color: var(--mcu-ink-soft); }