/* Tools (pipeline/pages/tools.py, js/tools.js): the inflation calculator. On top
   of the shared classes of style.css: .card, .sentence + .dd (a sentence whose
   blanks are the inputs), .result, .big, .pill, .chart, tables. Inflation is
   red (--cash), like everywhere on the site. */

.tool-form { margin: 22px 0 0; display: grid; gap: 14px; }
.tool-sentence { margin: 0; }
.tool-sentence .dd { padding: 0 10px; }
.tool-sentence .dd > span { color: var(--muted); }
.tool-sentence input, .tool-sentence select { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 2px 0; margin: 0; cursor: pointer; }
.tool-sentence input { width: 7.5ch; cursor: text; font-variant-numeric: tabular-nums; }
.tool-sentence input[aria-invalid="true"] { color: var(--bad); }
.tool-sentence select + select { margin-left: 4px; }
.tool-sentence .dd:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.tool-sentence input:focus, .tool-sentence select:focus { outline: none; }
.tool-sentence option { font: 500 15px var(--font); }
.tool-res { display: contents; }
.tool-result { margin-top: 2px; align-items: center; }
.tool-result .pill { align-self: center; }
.tool-form .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-answer { margin: 0; max-width: 72ch; color: var(--ink-2); font-size: 16px; }
.tool-answer b { color: var(--ink); font-weight: 650; }

/* the chart: as tall as the period needs, never empty while loading */
.tool-month h2 { margin-bottom: 12px; }
.chart .legend { padding: 2px 10px 0; margin: 0 0 4px; }
.tool-plot { min-height: 240px; }
.tool-plot.tool-fail { min-height: 0; padding: 28px 12px; font-size: 14px; color: var(--muted); }

/* tables */
.tool-note { margin: -4px 0 12px; max-width: 82ch; }
.tool-foot { margin: 10px 0 0; max-width: 82ch; }
.tool-table td, .tool-table th { font-variant-numeric: tabular-nums; }
.tool-table th[scope="row"] { text-align: left; font-weight: 600; }
.tool-table th[scope="row"] a { color: inherit; text-decoration-color: var(--axis); }
.tool-table th[scope="row"] a:hover { color: var(--accent-ink); }
.tool-sub { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 4px; }
.tool-mark { color: var(--muted); margin-left: 1px; }

.tool-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; font-weight: 600; }

@media (max-width: 640px) {
  .tool-sentence { line-height: 2.1; }
  .tool-result .btn { margin-left: 0; }
  .tool-table th:first-child, .tool-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .tool-table thead th:first-child { z-index: 2; }
}