form.inline { display: inline-block; margin: 0 0.25rem 0 0; }
form.inline button, form.inline select { margin: 0; width: auto; padding: 0.25rem 0.6rem; }
nav form.inline button { padding: 0.35rem 0.8rem; }
.narrow { max-width: 28rem; margin-inline: auto; }
.notice { padding: 0.75rem 1rem; border-left: 0.35rem solid; }
.notice.error { border-color: var(--pico-del-color); }
.notice.ok { border-color: var(--pico-ins-color); }
.error-text { color: var(--pico-del-color); }
.good { color: var(--pico-ins-color); font-weight: 600; }
.worse { color: var(--pico-del-color); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chart-box { position: relative; height: 320px; }
.test { margin-bottom: 1rem; }
.test input { margin-bottom: 0.25rem; font-size: 1.1rem; }
details.how { border: 0; margin: 0 0 0.25rem; }
details.how summary { font-size: 0.85rem; }
details.how p { font-size: 0.9rem; }
details.group > summary { font-weight: 600; font-size: 1.1rem; }
label.check { display: flex; align-items: center; gap: 0.5rem; }
#toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10;
  background: var(--pico-del-color); color: #fff; padding: 0.6rem 1rem; border-radius: 0.5rem; }
.brand { text-decoration: none; }
@media (max-width: 576px) {
  table { font-size: 0.9rem; }
  nav ul { flex-wrap: wrap; }
}