/* The inflation calculator's own styles, after the shared ../css/tool.css. Colour keeps the essay's meaning: blue = tins you keep,
   red = buying power lost to rising prices, green = gained / ahead, yellow = your money and rates. */
.tc-money input[type="number"] { -moz-appearance: textfield; }
.tc-money input::-webkit-outer-spin-button, .tc-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tc-try button { font-size: 0.8rem; }

/* tins: kept (blue), lost (red) or gained (green) */
.tc-bar .kept { background: #6f97c9; }
.tc-bar .lost { background: var(--red); }
.tc-bar .gain { background: var(--green); }
.tc-legend .sw-kept { background: #6f97c9; } .tc-legend .sw-lost { background: var(--red); } .tc-legend .sw-gain { background: var(--green); }
.tc-legend li { grid-template-columns: 14px 1fr auto 0; }

/* against the averages: one row per rate, the buying power each gives as a delta pill */
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vs-list li { display: grid; grid-template-columns: 5.2em 1fr auto; gap: 12px; align-items: center; }
.vs-list .nm { font: 400 1.08rem/1.25 var(--hand); -webkit-text-stroke: 0.02em currentColor; }
.vs-list .you .nm { font-weight: 400; text-decoration: underline 2px var(--yellow); text-underline-offset: 4px; }
.vs-list .tc-chip { background: var(--amber-bg); min-width: 0; }

/* the working card: savings rates in dark yellow (money), as in the bars */
.hud-card .yellow { color: #a8740a; }