:root { color-scheme: light dark; --hover: rgba(0, 0, 0, .06); }
@media (prefers-color-scheme: dark) { :root { --hover: rgba(255, 255, 255, .07); } }
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 60rem;
  padding: 24px 20px 64px;
  font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
h1 { font-size: 18px; }
h2 { margin-top: 32px; font-size: 15px; }
form.panel { display: grid; gap: 8px; max-width: 34rem; }
label { display: grid; gap: 4px; }
input, select, textarea, button { font: inherit; padding: 6px 8px; }
textarea { min-height: 7rem; }
button { cursor: pointer; }
button.danger { color: #b3261e; border-color: currentColor; }
@media (prefers-color-scheme: dark) { button.danger { color: #f2b8b5; } }
nav { margin: 4px 0 20px; }
nav a { margin: 0; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
/* Rows that carry data, so the header row does not light up under the cursor. */
tr:has(td):hover { background: var(--hover); }
tr.status-deactivated td { opacity: .55; text-decoration: line-through; }
tr.status-deprecated td { opacity: .75; }
th, td { border-bottom: 1px solid currentColor; padding: 5px 8px 5px 0; text-align: left; vertical-align: top; }
.bar { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.bar form { display: inline; }
.note { padding: 8px 10px; border: 1px solid currentColor; }
.dim { opacity: .7; }
/* Feedback is prose somebody typed, newlines and all, so it is shown as typed
   rather than reflowed into one paragraph. */
td.said { white-space: pre-wrap; min-width: 18rem; }
td.tally { text-align: right; }
/* The bar is characters, not a box with a width: style-src 'self' allows no
   inline style attribute to size one with. */
td.meter { letter-spacing: -.05em; }
.pager { margin-top: 16px; display: flex; gap: 16px; }