/* market expansion — toggleable per-market ARR contribution */
.market-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.market-chip { font: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
               padding: 0.5rem 0.9rem; cursor: pointer; color: var(--fg-muted); font-size: 0.85rem;
               transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease); }
.market-chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--border);
                     margin-right: 0.45rem; vertical-align: middle; transition: background 0.15s var(--ease); }
.market-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.market-chip[aria-pressed="true"] .dot { background: var(--accent); }
.market-chip:disabled { cursor: default; opacity: 0.85; }

/* the rows are .progress-row.inline, sized down and on the recessed surface */
.market-rows { --track-h: 16px; --track-bg: var(--surface-2); --label-w: 90px; --track-fr: 2.4fr;
               --col-gap: 0.7rem; --label-size: 0.8rem; --value-size: 0.74rem; gap: 0.55rem; }
/* JS drives these directly, so they must not animate in from scaleX(0) */
.market-rows .progress-fill { transform: scaleX(1); transition: width 0.3s var(--ease); }