/* Portrait first. Touch targets sized for a gloved finger at a trade fair. */
:root {
  --fg: #f2e600;
  --bg: #0a0a0a;
  --dim: #777;
  --ok: #4ec94e;
  --bad: #ff5a4d;
  --warn: #ffb020;
  --rule: #222;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 16px; max-width: 560px;
  background: var(--bg); color: #e8e8e8;
  font: 16px/1.5 ui-monospace, Menlo, Consolas, monospace;
  -webkit-text-size-adjust: 100%;
}
h1 {
  color: var(--fg); font-size: 18px; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 4px;
}
h1::before { content: "\25A0\00A0"; }
h2 {
  color: var(--fg); font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 6px;
}
.sub { color: var(--dim); font-size: 13px; margin-bottom: 20px; }
.note { color: var(--dim); font-size: 13px; margin: 0 0 10px; }
section { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 18px; }
button {
  display: block; width: 100%; margin: 8px 0; padding: 16px 14px; min-height: 52px;
  background: transparent; color: var(--fg); border: 2px solid var(--fg);
  font: 600 15px/1 ui-monospace, monospace; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 0;
}
button:active { background: var(--fg); color: var(--bg); }
button[disabled] { opacity: .35; }
input[type=file] {
  display: block; width: 100%; margin: 8px 0; padding: 12px;
  color: #e8e8e8; border: 1px dashed var(--rule); font: 13px/1.4 ui-monospace, monospace;
}
video { display: none; width: 100%; margin: 10px 0; background: #000; }
video.on { display: block; }
.kv { font-size: 13px; margin-top: 10px; }
.kv div { display: flex; gap: 10px; padding: 2px 0; }
.kv .k { color: var(--dim); flex: 0 0 148px; word-break: break-all; }
.kv .v { flex: 1 1 auto; word-break: break-word; }
/* The log is its own scroll container. Auto-scrolling the whole page every
   time a line lands would yank the tablet away from whatever section the
   tester is actually working in. */
#log {
  white-space: pre-wrap; word-break: break-word; margin-top: 12px;
  border-top: 1px solid var(--rule); padding-top: 12px; font-size: 13px;
  max-height: 44vh; overflow-y: auto; overscroll-behavior: contain;
}
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.dim { color: var(--dim); }
.hd { color: var(--fg); }