/* Reactions and comments on announcements (announcements.html only).

   The engagement sits on the card, not behind a link to somewhere else.
   Buttons here must sit ABOVE the invisible overlay that makes the whole
   card open the reader, or clicking a reaction would open the popup
   instead. */
.soc-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.soc-react {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.soc-react:hover { border-color: var(--sir-blue-3); background: var(--bg-grey); }
.soc-react:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.soc-react.is-mine { border-color: var(--sir-blue); background: rgba(0, 35, 73, 0.06); }
.soc-emoji { font-size: 15px; line-height: 1; }
.soc-count { font-size: 12px; font-weight: 600; color: var(--text); }
.soc-react.is-mine .soc-count { color: var(--sir-blue); }

.soc-comment-link {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 6px 4px;
  margin-left: auto;
  cursor: pointer;
}
.soc-comment-link:hover { color: var(--sir-blue); text-decoration: underline; }
.soc-comment-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.soc-error { font-size: 12px; color: #A3282D; margin: 6px 0 0; width: 100%; }

/* Inside the reader the bar is just a row, not a footer under a card. */
.rd-body .soc-bar { border-top: none; padding-top: 0; margin-top: 0; }
.rd-body .soc-comment-link { display: none; }

/* The thread inside the reader. */
.soc-thread {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.soc-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.soc-empty { font-size: 13px; color: var(--muted); margin: 0; }
.soc-comment-list { display: flex; flex-direction: column; gap: 14px; }
.soc-comment { display: flex; flex-direction: column; gap: 3px; }
.soc-comment-head { display: flex; align-items: baseline; gap: 9px; }
.soc-who { font-size: 13px; font-weight: 600; color: var(--ink); }
.soc-when { font-size: 12px; color: var(--muted); }
.soc-delete {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  text-decoration: underline;
}
.soc-delete:hover { color: #A3282D; }
.soc-delete:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.soc-delete[disabled] { opacity: 0.5; cursor: default; }
/* pre-wrap so the writer's own line breaks survive, without any of their
   text being treated as markup. */
.soc-comment-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
}

.soc-form { display: flex; flex-direction: column; gap: 10px; }
.soc-input { min-height: 62px; resize: vertical; }
.soc-form-actions { display: flex; justify-content: flex-end; }
.soc-send { padding: 9px 20px; }

@media (max-width: 700px) {
  .soc-comment-link { margin-left: 0; }
}