/* Metrics panel: one monospace font at two sizes, 2 px borders, no color. */
:root { --bg: #fff; --fg: #000; --s: 12px; --l: 24px; --b: 2px; }
@media (prefers-color-scheme: dark) { :root { --bg: #000; --fg: #fff; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg);
       font: var(--s)/1.25 ui-monospace, Menlo, Consolas, monospace; }
body { margin: 0; }
.l    { font-size: var(--l); font-variant-numeric: tabular-nums; }
.box  { border: var(--b) solid var(--fg); }
.over { background: var(--fg); color: var(--bg); }

.panel { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
/* Boxes share edges: each box after the first overlaps the previous border */
.panel > * + * { margin-top: calc(-1 * var(--b)); }

.head { display: flex; align-items: stretch; }
.head .title { padding: 4px 8px; flex: 1; }
.head .meta { padding: 4px 8px; align-self: center; text-transform: uppercase; }
button { font: inherit; text-transform: uppercase; background: var(--bg); color: var(--fg);
         border: 0; border-left: var(--b) solid var(--fg); padding: 0 12px; cursor: pointer; }
button:active, button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.video { position: relative; aspect-ratio: 4 / 3; background: var(--bg); }
.video video, .video canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.video .pulse { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); }
.numbers > div { padding: 4px 8px; text-transform: uppercase; }
.numbers > div + div { border-left: var(--b) solid var(--fg); }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 1px 6px; text-align: right; white-space: nowrap; font-weight: normal; }
th:first-child, td:first-child { text-align: left; text-transform: uppercase; }
tr.group th { text-align: left; text-transform: uppercase; border-top: var(--b) solid var(--fg); }
td.bar { width: 30%; padding: 1px 0; }
td.bar > div { height: 8px; background: currentColor; }

.plot { display: block; width: 100%; }
.plot.wave { height: 96px; }
.plot.spectrum { height: 96px; }
.plot.strip { height: 128px; }
.plot.eyes { height: 96px; }
.clock .tabs { display: flex; align-items: stretch; border-bottom: var(--b) solid var(--fg); }
.clock .tabs .name { flex: 1; padding: 4px 8px; }
.clock .about, .clock .status { padding: 2px 8px; }
.clock .status { font-variant-numeric: tabular-nums; border-bottom: var(--b) solid var(--fg); }
.plot.belief { height: 96px; border-bottom: var(--b) solid var(--fg); }
.plot.tracking { height: 96px; border-bottom: var(--b) solid var(--fg); }
.plot.phase { height: 76px; border-bottom: var(--b) solid var(--fg); }
.clock .controls { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.clock .controls button { border: var(--b) solid var(--fg); padding: 0 8px; }
.clock .controls .grow { flex: 1; }
/* Track Delay: a square track and thumb, 50 % thicker than the browser's */
.clock .slider { padding: 4px 8px; }
.clock .slider input[type="range"] { -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 24px; margin: 0; background: transparent; }
.clock .slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--fg); border-radius: 0; }
.clock .slider input[type="range"]::-moz-range-track { height: 6px; background: var(--fg); border-radius: 0; }
.clock .slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 24px; height: 24px;
  margin-top: -9px; background: var(--bg); border: var(--b) solid var(--fg); border-radius: 0; }
.clock .slider input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px;
  background: var(--bg); border: var(--b) solid var(--fg); border-radius: 0; }
.clock .slider input[type="range"]:focus-visible { outline: var(--b) solid var(--fg); outline-offset: 2px; }
.clock .ends { display: flex; justify-content: space-between; margin-top: 4px; }
.clock .ends span:last-child { text-align: right; }
.clock .controls input[type="checkbox"] { accent-color: var(--fg); margin: 0; }
.clock .delay { min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.log { margin: 0; padding: 4px 8px; height: calc(12 * 1.25em + 8px); overflow-y: auto; }

@media (max-width: 480px) {
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .numbers > div:nth-child(3) { border-left: 0; }
  .numbers > div:nth-child(n+3) { border-top: var(--b) solid var(--fg); }
  .p50, .max { display: none; }
}