/* Matcha vs Coffee — its own styles (the shared ones are core/tools.css). Scoped .chqt-mc*. */
.chqt-mc-styles, .chqt-mc-units { margin-top: 8px; }
.chqt-mc-styles button, .chqt-mc-units button { flex: 1 1 0; min-width: 0; }
.chqt-mc-cost { border: 1px solid var(--chqt-line); border-radius: 12px; padding: 4px 12px; margin: 10px 0; background: #fff; }
.chqt-mc-cost summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.chqt-mc-cost .chqt-pair { margin-top: 8px; }
.chqt-mc-scale { margin: 10px 0 4px; }
.chqt-mc-row + .chqt-mc-row { margin-top: 8px; }
.chqt-mc-name { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.chqt-mc-track { position: relative; height: 16px; border-radius: 8px; background: var(--chqt-cream); border: 1px solid var(--chqt-line); }
.chqt-mc-band { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: #a9cdbf; }
.chqt-mc-mid { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--chqt-accent); }
.chqt-mc-cof { position: absolute; top: -3px; bottom: -3px; width: 6px; margin-left: -3px; border-radius: 3px; background: #6b4a2b; }
.chqt-mc-ticks { display: flex; justify-content: space-between; margin: 3px 0 0; font-size: 12.5px; color: var(--chqt-muted); font-variant-numeric: tabular-nums; }
.chqt-mc-th { font-weight: 600; }
.chqt-mc-costline:empty { display: none; }
.chqt-mc-med { margin-top: 6px; }
@media (max-width: 460px) {
  /* the live header is ~123 px taller than the preview's (VN49): the lede and the kicker step aside on a phone */
  .chqt[data-tool="matcha-vs-coffee"] .chqt-lede, .chqt[data-tool="matcha-vs-coffee"] .chqt-kicker, .chqt[data-tool="matcha-vs-coffee"] .chqt-mc-tip { display: none; }
  .chqt[data-tool="matcha-vs-coffee"] .chqt-form { gap: 8px; }
  .chqt[data-tool="matcha-vs-coffee"] .chqt-grid { gap: 10px; }
}