/* The empty-state line is the first thing anyone reads on this page,
   and it was the dimmest text on it. */
#resultsPlaceholder{text-shadow:0 1px 2px rgba(0,0,0,.6);}
#resultsPlaceholder .muted{color:#aab4c2;}
.hint{color:#8d97a6;font-size:.8rem;margin-top:6px;}
/* The results table lands on the same translucent card as everything
   else, so it gets the same edge on every glyph and the same split
   between the column headings and the answers under them. */
table{
  width:100%;border-collapse:collapse;margin-top:4px;font-size:.92rem;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
td{color:#f2f6fa;}
th{color:#8d97a6;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
tr:last-child td{border-bottom:none;}
.tag{
  display:inline-block;background:var(--accent-soft);color:var(--accent);
  border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:600;
}
.status-ok{color:var(--ok);}
.status-err{color:var(--err);}
.muted{color:#8d97a6;}
footer{color:var(--muted);font-size:.78rem;text-align:center;margin-top:18px;line-height:1.6;}
a{color:var(--accent);}
.spinner{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);
  animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg);}}