:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}
body {
  margin: 0;
  background: Canvas;
  color: CanvasText;
}
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}
form,
li,
.outcome {
  border: 1px solid #8884;
  border-radius: 8px;
  padding: 1rem;
}
form {
  display: grid;
  gap: 0.75rem;
}
label {
  display: grid;
  gap: 0.25rem;
}
input,
textarea,
button {
  font: inherit;
  padding: 0.5rem;
}
textarea {
  width: 100%;
  min-height: 8rem;
  box-sizing: border-box;
}
ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.draft {
  white-space: pre-wrap;
  margin: 0 0 0.75rem;
}
.flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}
.flags li {
  border: 0;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: #e8a31733;
  font-size: 0.85rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
#login-error {
  color: #c0392b;
  margin: 0;
  min-height: 1.2em;
}
[hidden] {
  display: none !important;
}
.meta {
  margin: 0 0 0.25rem;
}
.held {
  opacity: 0.8;
}
.failed-reason,
.held-reason {
  font-weight: 600;
}
nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
select {
  font: inherit;
  padding: 0.5rem;
}
.check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#people-error {
  color: #c0392b;
  margin: 0;
}
#summary {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.outcome h3 {
  margin: 0 0 0.5rem;
}
.outcome ul {
  gap: 0.25rem;
}
.outcome li {
  border: 0;
  padding: 0;
}
.added {
  border-color: #2e8b57;
}
.rejected {
  border-color: #c0392b;
}

.thread .messages {
  list-style: none;
  padding: 0;
}
.thread .message.out {
  background: #f4f8ff;
}
.reply-box textarea {
  width: 100%;
  min-height: 6em;
}
.reply-box .error {
  color: #b00020;
}
.wargame {
  border-left: 3px solid #999;
  padding: 0 0.75rem;
  margin: 0 0 0.75rem;
}
.wargame p {
  margin: 0.25rem 0;
}
.wargame-none {
  color: #666;
  font-style: italic;
}
.wargame-verdict {
  font-weight: 600;
}
.wargame-verdict.reply_interested {
  color: #1a7f37;
}
.wargame-verdict.spam,
.wargame-verdict.delete {
  color: #b42318;
}
.follow-up {
  margin: 0 0 0.75rem;
}
.follow-up-step {
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.earlier {
  white-space: pre-wrap;
  margin: 0 0 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid #ccc;
  color: #555;
}