/*
 * Librarium Militaris — page chrome.
 * Masthead, sticky control bar, filter drawer, empty state, footer and the
 * dispatch sign-up (its call to action and the dialog behind it).
 */

/* --------------------------------------------------------------- masthead -- */

/* The top padding clears the corner rail. On a phone it leaves more room than
   the rail strictly needs: the sigil below is centred rather than off to one
   side, so it passes close under the button and wants the air. */
.masthead {
  position: relative;
  z-index: 10;
  padding: 5rem 1rem 3rem;
  background-color: var(--grim-800);
  text-align: center;
}

@media (min-width: 768px) {
  .masthead {
    padding-top: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* The calls to action, pinned to the plate's top-right corner. On a phone only
   the sign-up rides up here: the corner has room for one, and submitting a
   report is the footer's business at that width. */
.masthead__rail {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.masthead__rail .btn-submit { display: none; }

/* At the size the report page's own bar uses, so the two headers agree on how
   big the sign-up is. Written the wrong way round because it is the exception
   that needs stating, not the rule. */
@media (max-width: 767px) {
  .masthead__rail .btn-dispatch {
    font-size: 0.6875rem;
    padding: 0.375rem 0.625rem;
  }

  .masthead__rail .btn-dispatch svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

@media (min-width: 768px) {
  .masthead__rail {
    top: 1.5rem;
    right: 1.5rem;
  }

  .masthead__rail .btn-submit { display: inline-block; }
}

.masthead__inner {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.masthead__sigil {
  width: 3rem;
  height: 3rem;
  color: var(--accent);
  margin-bottom: 1rem;
  opacity: 0.8;
}

.masthead__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.masthead__kicker {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.2em;
  color: var(--zinc-400);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.masthead__blurb {
  color: var(--zinc-300);
  max-width: 42rem;
  margin-bottom: 2rem;
  line-height: 1.625;
}

@media (min-width: 768px) {
  .masthead__title { font-size: 3.75rem; line-height: 1; }
  .masthead__kicker { font-size: 1rem; line-height: 1.5rem; }
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--grim-700-50);
}

@media (min-width: 768px) {
  .stat-strip { gap: 2rem; }
}

.stat-strip__value { color: #fff; }
.stat-strip__sep { color: var(--zinc-600); }

.searchfield {
  position: relative;
  width: 100%;
  max-width: 42rem;
}

.searchfield__icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--zinc-500);
  pointer-events: none;
  transition: color 0.15s ease;
}

.searchfield:focus-within .searchfield__icon {
  color: var(--accent);
}

.searchfield__input {
  display: block;
  width: 100%;
  padding: 1rem 1rem 1rem 2.75rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.75rem;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.searchfield__input::placeholder { color: var(--zinc-600); }
.searchfield__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.searchfield__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------ control bar -- */

.controlbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(10, 10, 12, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grim-700);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.controlbar__row {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.controlbar__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.controlbar__group--lead {
  gap: 1rem;
  flex: 1 1 auto;
}

.btn-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  color: var(--zinc-300);
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.btn-filters svg { width: 1rem; height: 1rem; }

.btn-filters:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.btn-filters.is-open {
  background-color: var(--zinc-700);
  color: #fff;
}

.result-count {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--zinc-400);
}

.result-count__value { color: #fff; font-weight: 500; }
.result-count__total { color: var(--zinc-500); }

.spoiler-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  color: var(--zinc-300);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.spoiler-switch:hover { color: #fff; }

.spoiler-switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  flex: none;
  display: grid;
  place-content: center;
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.spoiler-switch input::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  box-shadow: inset 1rem 1rem #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.spoiler-switch input:checked {
  background-color: var(--danger);
  border-color: var(--danger);
}

.spoiler-switch input:checked::before { transform: scale(1); }

.spoiler-switch input:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.sortselect {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--grim-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem 1rem;
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: var(--zinc-300);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sortselect:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.sortselect option {
  background-color: var(--grim-800);
  color: var(--zinc-300);
}

/* --------------------------------------------------------- active filters -- */

.activefilters {
  border-top: 1px solid var(--grim-700-50);
  background-color: rgba(0, 0, 0, 0.4);
}

.activefilters__list {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  color: var(--zinc-300);
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  transition: all 0.2s ease;
}

.pill__group {
  opacity: 0.5;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 0.25rem;
}

.pill__remove {
  display: flex;
  margin-left: 0.25rem;
  color: inherit;
  transition: color 0.15s ease;
}

.pill__remove:hover { color: var(--danger); }
.pill__remove svg { width: 0.75rem; height: 0.75rem; }

.pill__remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.clear-all {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.5rem;
  text-decoration: underline;
  text-decoration-color: rgba(229, 169, 61, 0.3);
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.clear-all:hover { color: #fff; }

/* ----------------------------------------------------------- filter drawer -- */

.drawer {
  border-top: 1px solid var(--grim-700);
  background-color: rgba(21, 21, 24, 0.95);
  max-height: 60vh;
  overflow-y: auto;
}

.drawer__grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .drawer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .drawer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A column holds one group, or the three short ones stacked. */
.drawer__column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.filtergroup__title {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--grim-700);
}

/* On one narrow column every list is as tall as every other, so the cap is what
   keeps the drawer from running past the screen. Beside each other it is the
   stack of short groups that sets the height, and the taller cap below takes
   over. */
.filtergroup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 10rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* Format, Event Type and Language stacked run taller than one list capped at
   10rem, so Factions, Channel and Player were scrolling inside a short box with
   dead space under it. This clears the stack and a little more, which leaves
   the long lists — the ones worth scrolling — setting the drawer's height. */
@media (min-width: 768px) {
  .filtergroup__chips { max-height: 16rem; }
}

.chip {
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  color: var(--zinc-400);
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.125rem;
  text-align: left;
  transition: all 0.2s ease;
}

.chip:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.chip.is-on {
  background-color: var(--accent-20);
  color: var(--accent);
  border-color: var(--accent);
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------- main -- */

.archive {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  position: relative;
  z-index: 10;
  min-height: 50vh;
}

.emptystate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
  text-align: center;
}

.emptystate__icon {
  width: 4rem;
  height: 4rem;
  color: var(--zinc-700);
  margin-bottom: 1rem;
}

.emptystate__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.emptystate__body {
  color: var(--zinc-500);
  margin-bottom: 1.5rem;
  max-width: 28rem;
}

.btn-reset {
  padding: 0.5rem 1.5rem;
  background-color: var(--accent);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.125rem;
  transition: background-color 0.15s ease;
}

.btn-reset:hover { background-color: var(--accent-hover); }

.loadmore {
  margin-top: 3rem;
  text-align: center;
}

.btn-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background-color: var(--grim-800);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: var(--zinc-300);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.btn-loadmore:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-loadmore svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.15s ease;
}

.btn-loadmore:hover svg { transform: translateY(0.25rem); }

/* ----------------------------------------------------------------- footer -- */

.sitefooter {
  background-color: var(--grim-800);
  padding: 3rem 0;
  margin-top: 3rem;
  position: relative;
  z-index: 10;
}

.sitefooter__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.sitefooter__about { max-width: 28rem; }

.sitefooter__wordmark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.sitefooter__text {
  color: var(--zinc-500);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Two calls to action, the dispatch leading. They sit on one line where there is
   room for it and stack, still aligned with the footer's text, where there is not. */
.sitefooter__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.btn-submit {
  display: inline-block;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 0.125rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Four words that break over two lines make a button twice the height of the
     one beside it, so it holds its line and the row wraps around it instead. */
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.btn-submit:hover {
  color: #fff;
  border-color: #fff;
}

.sitefooter__legal {
  color: var(--zinc-600);
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.5rem;
  max-width: 24rem;
}

@media (min-width: 768px) {
  .sitefooter__inner {
    flex-direction: row;
    text-align: left;
  }

  .sitefooter__actions { text-align: right; }
  .sitefooter__cta { justify-content: flex-end; }
  .sitefooter__legal { margin-left: auto; }
}

/* ------------------------------------------------------- the dispatch call -- */

/* The archive's primary action, and the only filled button on the page: the
   masthead corner and the footer both raise the same dialog with it. */
.btn-dispatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--accent);
  color: #000;
  border-radius: 0.125rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(229, 169, 61, 0.15);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-dispatch:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(229, 169, 61, 0.35);
}

.btn-dispatch svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.btn-dispatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The form's own submit, which owns the width of the dialog. */
.btn-dispatch--wide {
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .btn-dispatch { font-size: 0.875rem; }
}

/* ------------------------------------------------------------------ modal -- */

.dispatchmodal {
  /* The reset zeroes every margin; a modal dialog centres itself with this one. */
  margin: auto;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  background: transparent;
  color: var(--text);
}

.dispatchmodal::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.dispatchmodal[open] { animation: dispatch-rise 0.18s ease-out; }

@keyframes dispatch-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

/* A fixed bar over a body that scrolls, rather than one scrolling box: the
   pickers make this taller than a short screen, and the close button has to
   stay reachable when it does. */
.dispatchmodal__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  background-color: var(--grim-800);
  /* .panel supplies the recessed plate; the accent edge marks it as the one
     thing on the page asking the reader for something. */
  border-top: 2px solid var(--accent);
  border-radius: 0.125rem;
}

.dispatchmodal__bar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 0.625rem 0.625rem 0;
}

.dispatchmodal__body {
  overflow-y: auto;
  padding: 0.5rem 1.75rem 1.75rem;
}

.dispatchmodal__close {
  display: flex;
  padding: 0.25rem;
  color: var(--zinc-500);
  transition: color 0.15s ease;
}

.dispatchmodal__close:hover { color: #fff; }
.dispatchmodal__close svg { width: 1.125rem; height: 1.125rem; }

.dispatchmodal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ dispatch form -- */

.dispatch { text-align: center; }

.dispatch__sigil {
  display: inline-flex;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.dispatch__sigil svg { width: 2rem; height: 2rem; }
.dispatch__sigil--done { color: #4ade80; }

.dispatch__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.75rem;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.dispatch__blurb {
  color: var(--zinc-400);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.dispatch__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
}

/* Rails wraps a field that failed validation. The wrapper carries no styling of
   its own here, so it must not become a box in the form's own column either. */
.dispatch__form .field_with_errors { display: contents; }

.dispatch__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.dispatch__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zinc-400);
}

.dispatch__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--grim-700);
  border-radius: 0.125rem;
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dispatch__input::placeholder { color: var(--zinc-600); }

.dispatch__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.dispatch__error {
  background-color: rgba(153, 27, 27, 0.15);
  border: 1px solid var(--danger);
  border-radius: 0.125rem;
  padding: 0.5rem 0.75rem;
  color: #fca5a5;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

/* ------------------------------------------------------------- the pickers -- */

.pickgroup {
  padding: 0;
  min-width: 0;
}

.pickgroup__title {
  display: block;
  padding: 0;
  width: 100%;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--grim-700);
}

.pickgroup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* The label is the control: the box itself keeps its place in the tab order and
   its keyboard behaviour, and gives up every pixel of its own appearance. */
.pickchip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  border-radius: 0.125rem;
  color: var(--zinc-400);
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.3125rem 0.5rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.pickchip input {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  flex: none;
  opacity: 0;
}

.pickchip:hover {
  color: #fff;
  border-color: var(--zinc-500);
}

.pickchip:has(input:checked) {
  background-color: var(--accent-20);
  border-color: var(--accent);
  color: var(--accent);
}

.pickchip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* "Everything" is a claim about the whole group, so it reads as a lead rather
   than as one more army in the list. */
.pickchip--all {
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pickchip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex: none;
}

.dispatch__note {
  color: var(--zinc-600);
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
}

/* The honeypot: present for anything that reads the markup, reachable by nobody. */
.dispatch__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dispatch--done .btn-dispatch--wide { margin-top: 0.5rem; }