/* News, discussion, "Was this helpful?", polls and the tier list (server only). Colours, fonts and spacing are the
   site's tokens (src/app/theme/tokens.css). No italics anywhere: emphasis is bold. Everything wraps; nothing scrolls
   sideways inside the page. */

.engagement {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8, var(--space-6));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.engagement-more,
.engagement-tier {
  margin: var(--space-3) 0 0;
}

.engagement-message,
.engagement-problem {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.engagement-message {
  background: var(--color-herb-soft);
  border-color: var(--color-herb);
}

.engagement-problem {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

/* --- Was this helpful? --- */

.helpful {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.helpful-question {
  margin: 0;
  font-weight: 700;
}

.helpful-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.helpful-thanks,
.helpful-count {
  margin: 0;
  color: var(--color-text-muted);
}

/* --- Polls --- */

.poll {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.poll-question {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg, var(--text-xl));
}

.poll-choices {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.poll-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  cursor: pointer;
}

.poll-choice input {
  accent-color: var(--color-accent);
  margin: 0;
  flex: none;
}

.poll-results,
.poll-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.poll-result {
  display: grid;
  gap: var(--space-1);
}

.poll-option {
  overflow-wrap: anywhere;
}

.poll-votes,
.poll-total,
.poll-status,
.poll-signin {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.poll-total,
.poll-status,
.poll-signin {
  margin: var(--space-3) 0 0;
}

/* --- Discussion --- */

.discussion-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.discussion-topic {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.discussion-topic-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg, var(--text-base));
  overflow-wrap: anywhere;
}

.discussion-meta,
.discussion-latest,
.discussion-when {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.discussion-latest {
  margin-top: var(--space-1);
}

.discussion-author {
  font-weight: 700;
  color: var(--color-text);
}

.discussion-empty {
  color: var(--color-text-muted);
}

.discussion-prompt {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-brass);
  background: var(--color-brass-soft);
  border-radius: var(--radius-sm);
}

.discussion-start > summary,
.discussion-action > summary,
.tier-unrated > summary {
  cursor: pointer;
  font-weight: 700;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
}

.discussion-form {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}

.discussion-field {
  display: grid;
  gap: var(--space-1);
}

.discussion-field label {
  font-weight: 700;
}

.discussion-field input,
.discussion-field textarea,
.tier-choice select {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.discussion-field textarea {
  resize: vertical;
}

.discussion-field input:focus-visible,
.discussion-field textarea:focus-visible,
.tier-choice select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.discussion-field [aria-invalid='true'] {
  border-color: var(--color-accent);
}

.discussion-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.discussion-error {
  margin: 0;
  color: var(--color-accent-text);
  font-weight: 700;
}

.discussion-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.discussion-thread {
  max-width: 46rem;
}

.discussion-post {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  scroll-margin-top: var(--space-8, var(--space-6));
}

.discussion-post[data-opening='true'] {
  background: var(--color-surface-raised);
}

.discussion-post[data-notice='true'] {
  border-style: dashed;
}

.discussion-post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.discussion-notice {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--color-brass-text);
}

.discussion-post-body {
  overflow-wrap: anywhere;
}

.discussion-post-body > :first-child {
  margin-top: 0;
}

.discussion-post-body > :last-child {
  margin-bottom: 0;
}

.discussion-post-body blockquote,
.news-post blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.discussion-post-body code,
.news-post code {
  font-family: var(--font-mono, monospace);
  font-size: 0.9em;
  padding: 0 0.25em;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  overflow-wrap: anywhere;
}

.discussion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.discussion-action form,
.discussion-report fieldset {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.discussion-report legend {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.discussion-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
}

.discussion-moderate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.discussion-moderate form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- News --- */

.news {
  max-width: 60rem;
}

.news-post {
  max-width: 46rem;
}

.news-back {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.news-dates,
.news-note,
.news-feeds,
.news-tag-list {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.news-tag-list a {
  margin-left: var(--space-2);
}

.articles-more {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.news-tags ul {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.news-tags a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
}

.news-tags a[aria-current='page'] {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.news-cover {
  margin: var(--space-4) 0;
}

.news-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* --- The tier list --- */

.tier-season {
  color: var(--color-text-muted);
}

.tier-group {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.tier-group[data-tier='s'] {
  border-left-color: var(--color-rarity-ur);
}

.tier-group[data-tier='a'] {
  border-left-color: var(--color-rarity-ssr);
}

.tier-group[data-tier='b'] {
  border-left-color: var(--color-rarity-sr);
}

.tier-group[data-tier='c'] {
  border-left-color: var(--color-border-strong);
}

.tier-name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
}

.tier-meaning {
  display: block;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

.tier-heroes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tier-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tier-votes {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tier-none {
  margin: 0;
  color: var(--color-text-muted);
}

.tier-choices {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.tier-choice {
  display: grid;
  gap: var(--space-1);
}

.tier-choice label {
  font-weight: 700;
}

/* Links drawn as buttons. */
.engagement a.Button__button,
.news a.Button__button {
  text-decoration: none;
}

/* --- Articles: Moo's boxes, steps, contents and series --- */

.news-post .md-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.news-post h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

.news-post h3 {
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

.news-post .md-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.md-step-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.md-key {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-brass-soft);
  border-left: 4px solid var(--color-brass);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}

.md-key-title {
  margin: 0 0 var(--space-2);
  color: var(--color-brass-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.md-key-body {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.md-key-body > :first-child {
  margin-top: 0;
}

.md-key-body > :last-child {
  margin-bottom: 0;
}

.news-post .Callout__callout {
  margin: var(--space-5) 0;
}

.post-series-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-sm);
}

.post-series-tag a {
  font-weight: 700;
}

.post-series-eyebrow {
  display: inline-flex;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-brass-soft);
  color: var(--color-brass-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.post-series-part {
  color: var(--color-text-muted);
}

.post-contents {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.post-contents-title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.post-contents ol {
  margin: 0;
  padding-left: var(--space-5);
  columns: 2 16rem;
  column-gap: var(--space-6);
}

.post-contents li {
  break-inside: avoid;
  padding: var(--space-1) 0;
}

.post-series {
  margin: var(--space-7) 0 var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.post-series-sides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
}

.post-series-next {
  grid-column: -2;
}

.post-series-all {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.post-series-all summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-weight: 700;
}

.post-series-all ol {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  display: grid;
  gap: var(--space-1);
}

.post-series-all li {
  display: flex;
  gap: var(--space-2);
}

.post-series-number {
  min-width: 2.25em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.post-series-all a[aria-current='page'] {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.articles-series {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
}

.post-contents,
.post-series {
  max-width: var(--measure);
}

/* Article cards (/plague/articles and its categories): a cover picture over the eyebrow, title and summary. The
   whole card is the link's tap area; every card has a picture, so a row lines up. */
.articles .article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms ease, transform 120ms ease;
}

.articles .article-card:hover,
.articles .article-card:focus-within {
  border-color: var(--color-brass);
  transform: translateY(-2px);
}

.article-card__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.article-card__eyebrow {
  margin: 0;
  color: var(--color-brass-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.article-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.article-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.article-card__title a:focus-visible {
  outline: none;
}

.articles .article-card:has(a:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.article-card__summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  .articles .article-card { transition: none; }
  .articles .article-card:hover,
  .articles .article-card:focus-within { transform: none; }
}

/* Moo's drawings come in a dark and a light copy (ThemedPictures): show the one for the reader's theme. */
:root:not([data-theme='light']) .theme-light-only,
:root[data-theme='light'] .theme-dark-only {
  display: none !important;
}

/* A picture in Moo's writing (![What it shows](/news/picture.webp)): full width, its words as the caption. */
.md-figure {
  margin: var(--space-5) 0;
}

.md-figure-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.md-figure-caption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}