.spread-meter-root { display: grid; gap: var(--s4); max-width: 40rem; margin-inline: auto; }
.spread-meter-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }
.spread-meter-root .spread-meter-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
/* the two prices: centred readouts; the price you just traded at gets a red rule */
.spread-meter-root .spread-meter-tile { text-align: center; justify-items: center; transition: border-color var(--dur); }
.spread-meter-root .spread-meter-tile.is-active { border-top-color: var(--brand); }
.spread-meter-root .spread-meter-tile.is-active .w-readout-label { color: var(--ink); }
.spread-meter-root .spread-meter-gap { margin: calc(-1 * var(--s2)) 0 0; text-align: center; font: 400 var(--fs-small)/1.5 var(--font-ui); color: var(--ink-2); }
.spread-meter-root .spread-meter-gap .w-tag { margin-right: var(--s1); color: var(--ink); }
.spread-meter-root .spread-meter-label { margin: 0; text-align: center; }
.spread-meter-root .spread-meter-btns { display: flex; flex-wrap: wrap; gap: var(--s3); }
.spread-meter-root .spread-meter-btns .w-btn { flex: 1 1 13rem; }
.spread-meter-root .spread-meter-jar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(-1 * var(--s2)); }
.spread-meter-root .spread-meter-jar:empty, .spread-meter-root .spread-meter-tally:empty { display: none; }
.spread-meter-root .spread-meter-coin { padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--r-pill); background: var(--paper); color: var(--down); font: 700 var(--fs-small)/1.2 var(--font-ui); font-variant-numeric: tabular-nums; }
.spread-meter-root .spread-meter-tally { margin: 0; font: 400 var(--fs-small)/1.45 var(--font-ui); }
.spread-meter-root .spread-meter-tally b { white-space: nowrap; color: var(--down); }
.spread-meter-root .spread-meter-month { display: grid; gap: var(--s4); padding-top: var(--s4); border-top: var(--rule); }
.spread-meter-root .spread-meter-month .w-note { margin: 0; }
.spread-meter-root .spread-meter-costs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }