/* 0.20 "Run the self-test" in Diagnostics. Sixteen lines a client reads at a
   venue, often standing up, often on a screen we have never seen: so the
   verdict is a word in a printed tag, not a colour on its own, and the line
   still reads with the colour taken away. Drawn like every other card in the
   drawer -- solid fill, ink outline, hard offset shadow. No motion: this is
   the panel someone reads when something is already wrong. */
/* theme.css has a soft tint for ok and for danger but none for the middle
   verdict, so this panel carries its own, in both themes. */
#admin { --selftest-warn-soft: var(--yellow-light); }
body[data-admin-theme="dark"] #admin { --selftest-warn-soft: #463C10; }

#admin .selftest-summary {
  margin: 12px 0; padding: 10px 14px;
  font-weight: 800; font-size: 16px;
  background: var(--surface-2); color: var(--ink);
  border: 3px solid var(--ink-line); border-radius: var(--r); box-shadow: var(--pop);
}
#admin .selftest-summary.is-pass { background: var(--ok-soft); }
#admin .selftest-summary.is-warn { background: var(--selftest-warn-soft); }
#admin .selftest-summary.is-fail { background: var(--danger-soft); }

#admin .selftest-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }

#admin .selftest-line {
  /* One fixed column for the tag, so every title starts at the same place
     and the list reads as a column rather than a ragged edge. */
  display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: start;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink-line); border-radius: var(--r); padding: 10px 12px;
}
/* The wrong line lifts off the page instead of growing a thicker border:
   a thicker border would move its words a pixel out of line with the rest. */
#admin .selftest-line.is-fail { box-shadow: var(--pop); }

#admin .selftest-verdict {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  text-align: center; align-self: start; justify-self: stretch;
  border: 2px solid var(--ink-line); border-radius: 999px; padding: 3px 10px;
  background: var(--surface-2); color: var(--ink-line);
}
#admin .selftest-line.is-pass .selftest-verdict { background: var(--ok); color: #fff; }
#admin .selftest-line.is-warn .selftest-verdict { background: var(--yellow); color: var(--ink-line); }
#admin .selftest-line.is-fail .selftest-verdict { background: var(--danger); color: #fff; }

#admin .selftest-words { display: grid; gap: 3px; min-width: 0; }
#admin .selftest-words strong { font-weight: 800; }
#admin .selftest-says { color: var(--ink); overflow-wrap: anywhere; }
#admin .selftest-todo {
  color: var(--ink-2); font-style: italic;
  border-left: 3px solid var(--ink-line); padding-left: 10px; margin-top: 3px;
}

/* A narrow drawer, or the larger-text setting: the tag goes above the words
   rather than squeezing them into a column two syllables wide. */
@media (max-width: 720px) {
  #admin .selftest-line { grid-template-columns: 1fr; gap: 6px; }
  #admin .selftest-verdict { justify-self: start; }
}