* { box-sizing: border-box; }

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111;
  background: #fff;
}

body { margin: 0; line-height: 1.5; }
header { border-bottom: 1px solid #ccc; padding: 1rem max(1rem, calc((100% - 1050px) / 2)); }
header h1 { margin: 0; font-size: 1.3rem; }
main { width: min(1050px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
section { border: 1px solid #ccc; border-radius: 4px; padding: 1rem; margin: 1rem 0; }
section section { border-color: #ddd; }
h2, h3, h4 { margin-top: 0; }

label { display: block; font-weight: 600; margin-bottom: .3rem; }
input { width: min(100%, 30rem); border: 1px solid #999; border-radius: 3px; padding: .6rem; }
button { border: 1px solid #222; border-radius: 3px; background: #fff; color: #111; padding: .55rem .8rem; cursor: pointer; }
button:hover { background: #eee; }
button:disabled { opacity: .5; cursor: wait; }
form button { margin-left: .3rem; }

pre { overflow: auto; border: 1px solid #ccc; border-radius: 3px; background: #f5f5f5; padding: 1rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .92rem; }
th, td { border-bottom: 1px solid #ddd; padding: .6rem .45rem; text-align: left; vertical-align: top; }
th { font-size: .8rem; }
caption { text-align: left; font-weight: 600; margin-bottom: .35rem; }

.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid #ccc; margin-top: .75rem; }
.tabs [role="tab"] { border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; background: none; margin-bottom: -1px; }
.tabs [role="tab"]:hover { background: #eee; }
.tabs [role="tab"][aria-selected="true"] { border-color: #ccc; border-bottom: 1px solid #fff; font-weight: 600; background: #fff; }
[role="tabpanel"] { padding-top: .75rem; }
[role="tabpanel"] canvas { max-height: 300px; filter: grayscale(1); }
#chart-timeline { max-height: 300px; filter: grayscale(1); }
.muted { color: #555; font-size: .9rem; margin: .25rem 0 .5rem; }
[role="alert"] { font-weight: 600; }

.stats { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; }
.stats span { display: inline-flex; align-items: baseline; gap: .4rem; }
.stats strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.stats span::after { content: none; }

@media (max-width: 700px) {
  main { width: calc(100% - 1rem); }
  section { padding: .75rem; }
  form button { display: block; margin: .6rem 0 0; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}