/* Community pages: /contribute, /changelog, /admin and the notes on a quest page.
 *
 * Loaded by those pages only (a <link> in their head_extra block, or inside the notes partial),
 * and written to stand on its own: every colour is a variable of the site stylesheet with a
 * fallback, so a restyle of pq.css changes these pages with it and a page that loses pq.css is
 * still readable.  Class names are all `cm-` so nothing here can collide with the shell.
 */

.cm-lede { max-width: 60ch; color: var(--text-dim, #a7adc2); }

/* ---- the form ------------------------------------------------------------------------- */

.cm-form { display: grid; gap: 1.1rem; max-width: 44rem; }
.cm-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cm-form legend { font-weight: 600; margin-bottom: 0.35rem; padding: 0; }

.cm-choices { display: grid; gap: 0.5rem; }
.cm-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border, #2b2e3c);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-raised, #1a1c26);
  cursor: pointer;
}
.cm-choice:hover { border-color: var(--border-strong, #3c4152); }
.cm-choice input { margin-top: 0.3rem; }
.cm-choice:has(input:checked) { border-color: var(--accent, #6fd18c); }
.cm-choice .cm-hint { grid-column: 2; color: var(--text-faint, #7d8399); font-size: 0.85rem; }

.cm-field { display: flex; flex-direction: column; gap: 0.25rem; }
.cm-field label { font-size: 0.85rem; color: var(--text-dim, #a7adc2); }
.cm-field input[type="text"],
.cm-field input[type="number"],
.cm-field select,
.cm-field textarea {
  width: 100%;
  font: inherit;
  color: var(--text, #e7e9f2);
  background: var(--bg-inset, #0e0f15);
  border: 1px solid var(--border-strong, #3c4152);
  border-radius: var(--radius-sm, 6px);
  padding: 0.5rem 0.6rem;
}
.cm-field textarea { min-height: 11rem; resize: vertical; line-height: 1.5; }
.cm-field .cm-count { color: var(--text-faint, #7d8399); font-size: 0.8rem; }
.cm-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.cm-about { color: var(--text-dim, #a7adc2); margin: 0; }
.cm-next { max-width: 44rem; }
.cm-next ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* ---- the details and the pickers ----------------------------------------------------- */

.cm-details { display: grid; gap: 0.8rem; padding-top: 0.4rem; border-top: 1px solid var(--border, #2b2e3c); }
.cm-details > .basis { margin: 0; }
.cm-field textarea.cm-short { min-height: 5rem; }
.cm-field input[type="search"] {
  width: 100%;
  font: inherit;
  color: var(--text, #e7e9f2);
  background: var(--bg-inset, #0e0f15);
  border: 1px solid var(--border-strong, #3c4152);
  border-radius: var(--radius-sm, 6px);
  padding: 0.5rem 0.6rem;
}

/* The rows a picker lists under its field: the server's fragment (contribute/_subjects.html). */
.cm-picker { position: relative; }
.cm-picks {
  border: 1px solid var(--border-strong, #3c4152);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-raised, #1a1c26);
  max-height: 18rem;
  overflow-y: auto;
}
.cm-picks .search-hint { padding: 0.55rem 0.7rem; font-size: 0.9rem; color: var(--text-dim, #a7adc2); margin: 0; }
.cm-pick-list { margin: 0; padding: 0; list-style: none; }
.cm-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.6rem;
  align-items: baseline;
  width: 100%;
  padding: 0.45rem 0.7rem;
  font: inherit;
  text-align: left;
  color: var(--text, #e7e9f2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border, #2b2e3c);
  cursor: pointer;
}
.cm-pick:hover, .cm-pick:focus-visible { background: var(--bg-inset, #0e0f15); outline: none; }
.cm-pick-title { font-weight: 600; }
.cm-pick-id, .cm-pick-detail { color: var(--text-faint, #7d8399); font-size: 0.85rem; }

/* A report's details, on the author's list and in the admin's queue. */
.cm-details-list {
  display: grid;
  gap: 0.3rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--bg-inset, #0e0f15);
  border-radius: var(--radius-sm, 6px);
}
.cm-details-list dt { color: var(--text-faint, #7d8399); font-size: 0.8rem; }
.cm-details-list dd { margin: 0; overflow-wrap: anywhere; }
.cm-details-list div:has(> dd.cm-text) { grid-column: 1 / -1; }

/* ---- the search over the lists -------------------------------------------------------- */

.cm-search {
  display: grid;
  gap: 0.6rem 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  align-items: end;
  margin: 1rem 0;
}
.cm-search .cm-search-text { grid-column: span 2; }
.cm-search-go { display: flex; gap: 0.7rem; align-items: center; }
.cm-public-matches { margin-top: 2rem; }
.cm-public-matches h3 { font-size: 1rem; }
.cm-about-links { margin-top: 0.4rem; }

@media (max-width: 40rem) {
  .cm-search .cm-search-text { grid-column: auto; }
}

/* ---- plain text, shown as typed ------------------------------------------------------- */

/* A contribution is plain text: line breaks are kept, nothing is interpreted, and a long unbroken
   string wraps instead of pushing the page wider than the screen. */
.cm-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.25rem 0 0; }

/* ---- the author's list and the admin's queue ------------------------------------------ */

.cm-list { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.cm-item {
  border: 1px solid var(--border, #2b2e3c);
  border-radius: var(--radius, 10px);
  background: var(--bg-raised, #1a1c26);
  padding: 0.8rem 1rem;
}
.cm-item h2, .cm-item h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.cm-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; color: var(--text-faint, #7d8399); font-size: 0.85rem; }
.cm-status { font-weight: 600; }
.cm-status[data-status="pending"] { color: var(--warn, #ffcc66); }
.cm-status[data-status="approved"] { color: var(--accent, #6fd18c); }
.cm-status[data-status="rejected"],
.cm-status[data-status="removed"] { color: var(--danger, #ff8a8a); }

.cm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.7rem; }
.cm-actions button { font: inherit; cursor: pointer; }
.cm-danger {
  background: transparent;
  color: var(--danger, #ff8a8a);
  border: 1px solid var(--danger, #ff8a8a);
  border-radius: var(--radius-sm, 6px);
  padding: 0.3rem 0.7rem;
}
.cm-danger:hover { background: rgba(255, 138, 138, 0.12); }

.cm-moderation { margin-top: 0.8rem; border-top: 1px solid var(--border, #2b2e3c); padding-top: 0.7rem; }
.cm-moderation textarea { min-height: 3.5rem; }
.cm-private {
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--warn, #ffcc66);
  background: var(--bg-inset, #0e0f15);
  color: var(--text-dim, #a7adc2);
  font-size: 0.9rem;
}

.cm-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cm-filters a {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border-strong, #3c4152);
  border-radius: 999px;
  color: var(--text, #e7e9f2);
  text-decoration: none;
  font-size: 0.9rem;
}
.cm-filters a[aria-current="true"] { border-color: var(--accent, #6fd18c); color: var(--accent, #6fd18c); }
.cm-filters .cm-n { color: var(--text-faint, #7d8399); margin-left: 0.25rem; }

.cm-counts { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0; }
.cm-counts div {
  border: 1px solid var(--border, #2b2e3c);
  border-radius: var(--radius, 10px);
  background: var(--bg-raised, #1a1c26);
  padding: 0.6rem 0.8rem;
}
.cm-counts dt { color: var(--text-dim, #a7adc2); font-size: 0.85rem; }
.cm-counts dd { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.cm-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }

/* ---- the public Bugtracker ------------------------------------------------------------ */

.bt-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; align-items: start; }
.bt-body { min-width: 0; }
.bt-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.2rem;
  border: 1px solid var(--border, #2b2e3c);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-inset, #0e0f15);
}
.bt-vote form { margin: 0; }
.bt-count { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-label { color: var(--text-faint, #7d8399); font-size: 0.8rem; }
.bt-status {
  display: inline-block;
  padding: 0 0.5rem;
  margin-right: 0.35rem;
  border: 1px solid var(--border-strong, #3c4152);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
  color: var(--text-dim, #a7adc2);
}
.bt-status[data-status="confirmed"] { color: var(--warn, #ffcc66); border-color: var(--warn, #ffcc66); }
.bt-status[data-status="fixed"] { color: var(--accent, #6fd18c); border-color: var(--accent, #6fd18c); }
.bt-status[data-status="wontfix"] { color: var(--text-faint, #7d8399); }
.bt-tracker { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bt-tracker label { font-size: 0.85rem; color: var(--text-dim, #a7adc2); }
.cm-visibility .cm-hint a, .cm-choice a { color: inherit; }

@media (max-width: 40rem) {
  .bt-item { grid-template-columns: 1fr; }
  .bt-vote { flex-direction: row; justify-content: flex-start; }
}

/* ---- the changelog -------------------------------------------------------------------- */

.cm-day { margin: 1.4rem 0 0.4rem; font-size: 1rem; color: var(--text-dim, #a7adc2); }
.cm-changes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border, #2b2e3c); }
.cm-changes li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border, #2b2e3c);
}
.cm-changes .cm-what { font-weight: 600; }
.cm-changes .cm-ref { color: var(--text-faint, #7d8399); font-size: 0.9rem; }
.cm-changes .cm-source { margin-left: auto; color: var(--text-faint, #7d8399); font-size: 0.8rem; }
.cm-changes .cm-note { flex-basis: 100%; color: var(--text-dim, #a7adc2); font-size: 0.9rem; }

/* ---- the notes on a quest page -------------------------------------------------------- */

.cm-notes { margin-top: 2rem; }
.cm-notes h2 { margin-bottom: 0.2rem; }
.cm-note {
  border-left: 3px solid var(--border-strong, #3c4152);
  padding: 0.4rem 0.9rem;
  margin: 0.8rem 0;
}
.cm-note h3 { margin: 0; font-size: 1rem; }
.cm-note .cm-by { color: var(--text-faint, #7d8399); font-size: 0.82rem; margin: 0.15rem 0 0; }
.cm-kind {
  display: inline-block;
  padding: 0 0.5rem;
  margin-right: 0.4rem;
  border: 1px solid var(--border-strong, #3c4152);
  border-radius: 999px;
  color: var(--text-dim, #a7adc2);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}

@media (max-width: 40rem) {
  .cm-changes .cm-source { margin-left: 0; flex-basis: 100%; }
}

/* ---- /admin/bis: the corrections of the best-in-slot lists ----------------------------- */

.ab-tiles { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ab-specs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.ab-specs li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }

.ab-chooser { margin: 0 0 1rem; }
.ab-help ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.ab-slot { margin-top: 1rem; }
.ab-slot h2 { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; }

.ab-table { width: 100%; border-collapse: collapse; }
.ab-table th, .ab-table td { text-align: left; vertical-align: top; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border, #2b2e3c); }
.ab-row[data-status="hidden"], .ab-row[data-status="wrong"], .ab-row[data-status="orphaned"] { opacity: 0.8; }
.ab-row[data-status="hidden"] td:nth-child(2),
.ab-row[data-status="wrong"] td:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--text-faint, #7d8399); }
.ab-status { font-weight: 600; }
.ab-status[data-status="pinned"], .ab-status[data-status="added"] { color: var(--accent, #6fd18c); }
.ab-status[data-status="hidden"], .ab-status[data-status="wrong"] { color: var(--warn, #ffcc66); }
.ab-status[data-status="orphaned"], .ab-orphan { color: var(--danger, #ff8a8a); }

.ab-ov { display: grid; gap: 0.25rem; margin-top: 0.45rem; font-size: 0.88rem; color: var(--text-dim, #a7adc2); }
.ab-clear { margin: 0; }

.ab-edit summary { cursor: pointer; color: var(--accent, #6fd18c); }
.ab-form { display: grid; gap: 0.6rem; margin-top: 0.6rem; min-width: min(100%, 16rem); }
.ab-add { margin-top: 0.8rem; }
.ab-add .ab-form { max-width: 44rem; }