/* Percentage Change. Tokens, header and footer come from the site stylesheet. */
.intro h1 { font-size: 22px; margin: 0 0 12px; }

.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 16px; }
.nums label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 600; }
.nums input {
  font: inherit; font-size: 20px; font-variant-numeric: tabular-nums;
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text);
}
.nums input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
noscript button { margin-bottom: 16px; }

.out {
  margin: 0 0 16px; padding: 4px 16px; min-height: 104px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.out .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; }
.out .row + .row { border-top: 1px solid var(--line); }
.out .lbl { color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.out .pct { margin: 0; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.out .up .pct { color: var(--ok); }
.out .down .pct { color: var(--err); }
.out .na .pct { font-size: 15px; font-weight: 400; color: var(--warn); }
.out .hint { margin: 0; padding: 12px 0; }
.out .hint.err { color: var(--err); }

@media (max-width: 420px) {
  .out .row { flex-direction: column; gap: 2px; }
}