/* krick.html: interactive charts drawn by draw.js, and the filter buttons and color keys in the text */

.chart { margin-block: 1.75rem .75rem; }
.chart .graph { width: 100%; overflow: hidden; border-radius: .5rem; background: #fafafa; }
.chart form { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.75rem; margin-top: .75rem; font-size: .875rem; line-height: 1.4; }
.chart fieldset { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.chart legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chart label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.chart input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }

/* weekday colors, as used by draw.js */
.chart label:is(.monday, .tuesday, .wednesday, .thursday, .friday) { text-decoration: underline 3px var(--day); text-underline-offset: .3em; }
.monday { --day: #288df6; }
.tuesday { --day: #eda321; }
.wednesday { --day: #d2ea32; }
.thursday { --day: #23d36d; }
.friday { --day: #f62b19; }

/* filter buttons in the text set a chart's checkboxes */
button.filter {
  padding: 0 .4rem; border: 0; border-radius: .25rem;
  background: var(--day, var(--muted)); color: #fff;
  font: inherit; cursor: pointer;
}
button.filter:is(.wednesday, .tuesday) { color: #1c2422; }

/* color keys for the payment and weather charts */
.key { padding: 0 .4rem; border-radius: .25rem; color: #fff; }
.key.cash, .key.temperature { background: #288df6; }
.key.account { background: #23d36d; color: #1c2422; }
.key.clearDay { background: #f7d115; color: #1c2422; }
.key.partlyCloudyOrFogOrWindDay { background: #c0c0c0; color: #1c2422; }
.key.cloudy { background: #797979; }
.key.rain { background: #000; }