/* The board is the widest surface in the app — N teams side by side — so it
   takes the full page measure rather than the 1000px the match pages use.
   At 1240 the teams grid below fits four across. */
.mix-page {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* A <turbo-frame> is an inline custom element with no layout of its own, so
   without this every block inside the board stacked with no gap at all. */
.mix-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* The copy-link component carries its own top margin for pages that don't
   space their children; here the flex gap already does that job. */
.mix-board > .copy-link {
  margin-top: 0;
}

/* Labelled sections get a little extra air above them, so the page reads as
   groups rather than one evenly-spaced stack. */
.mix-board > .mix-section,
.mix-board > .mix-columns {
  margin-top: var(--space-sm);
}

.mix-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.mix-page__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
}

.mix-page__meta {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Quiet text action, matching the destructive controls elsewhere. */
.mix-page__delete {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out);
}

.mix-page__delete:hover {
  color: var(--action-destructive-fg);
}

.mix-page__header form {
  margin: 0;
}

.mix-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.mix-banner {
  margin: 0;
  padding: 11px var(--space-md);
  border-radius: var(--radius);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
}

.mix-banner--done {
  background: var(--surface-win);
  border-color: var(--border-win);
  color: var(--text-win);
}

/* ---------------------------------------------------------------- listing */

.mix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mix-list__link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: var(--transition-control);
}

.mix-list__link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.mix-list__status {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loud);
  color: var(--text-tertiary);
}

.mix-list__status--drafting {
  color: var(--text-win);
}

/* Over, so it recedes — mint is for what is still happening. */
.mix-list__status--finished {
  color: var(--text-tertiary);
}

.mix-list__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- sections */

.mix-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mix-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.mix-section__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.mix-section__hint {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mix-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.mix-actions {
  display: flex;
  gap: var(--space-sm);
}

/* ----------------------------------------------------------------- roster */

.mix-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mix-roster__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-smd);
  padding: 10px var(--space-md);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
  transition: var(--transition-control);
}

.mix-roster__item:hover {
  border-color: var(--border-strong);
}

.mix-roster__number {
  flex: 0 0 22px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
}

.mix-roster__nickname {
  flex: 0 1 auto;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mix-roster__positions {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
}

.mix-roster__elo {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.mix-roster__remove-form {
  margin: 0;
  flex: 0 0 auto;
}

.mix-roster__remove {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.mix-roster__remove:hover {
  color: var(--action-destructive-fg);
}

.mix-roster--out .mix-roster__item {
  opacity: 0.55;
}

/* ------------------------------------------------------------------ teams */

/* Four across on a full-width page: the 1240 cap leaves 1176 of content, and
   4 x 240 + 3 x 24 = 1032 fits where a fifth (1296) would not. Degrades to
   three, two and one as the window narrows. */
.mix-teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.mix-team {
  display: flex;
  flex-direction: column;
  gap: var(--space-smd);
  padding: var(--card-pad-sm);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.mix-team__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.mix-team__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.mix-team__elo {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  border: var(--border-width) solid transparent;
}

/* The side that picks next — the one mint on the board. */
.mix-team__elo--lowest {
  background: linear-gradient(135deg, #effbf7, #cdf2e5);
  border-color: var(--mint-300);
  color: var(--mint-800);
}

.mix-team__roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mix-team__member {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-sm);
  padding: var(--space-sm) var(--space-smd);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}

/* Spans the full row: the rating only needs the first line, and giving the
   positions the whole width keeps "SUPPORT · ADC · JUNGLE" on one line in a
   four-across card. */
.mix-team__positions {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
}

.mix-team__member-elo {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.mix-team__empty {
  padding: var(--space-smd);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mix-team__add {
  width: 100%;
}

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

.mix-modal {
  width: min(480px, calc(100vw - 2 * var(--space-md)));
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface-card);
  color: var(--text-primary);
}

.mix-modal::backdrop {
  background: var(--scrim);
}

.mix-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  max-height: 70vh;
}

.mix-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.mix-modal__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.mix-modal__close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--dur) var(--ease-out);
}

.mix-modal__close:hover {
  color: var(--text-primary);
}

.mix-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mix-modal__pick {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-sm);
  width: 100%;
  text-align: left;
  padding: 10px var(--space-smd);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: inherit;
  cursor: pointer;
  transition: var(--transition-control);
}

.mix-modal__pick:hover {
  border-color: var(--border-selected);
  box-shadow: var(--shadow-xs);
}

.mix-modal__positions {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
}

.mix-modal__elo {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------------- join */

.mix-join {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.mix-join__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
}

.mix-join__meta {
  margin: var(--space-xs) 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.mix-join__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mix-join__nomatch {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.mix-join__already {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* `display: flex` from this rule would otherwise beat the user agent's
   `[hidden] { display: none }`, leaving the panel on screen before a player
   has been picked. */
.mix-join__panel[hidden] {
  display: none;
}

.mix-join__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--card-pad);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mix-join__summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.mix-join__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.mix-join__elo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.mix-join__positions {
  font-size: 13px;
  color: var(--text-secondary);
}

.mix-join__new-summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

.mix-join__new[open] .mix-join__new-summary {
  margin-bottom: var(--space-md);
}

.combobox__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.combobox__option-elo {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .mix-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- matches */

.mix-team__rank {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-xs);
}

.mix-team__delta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.mix-team__delta--up {
  color: var(--text-win);
}

.mix-team__delta--down {
  color: var(--text-loss);
}

.mix-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mix-matches__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-smd);
  padding: 10px var(--space-md);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-base);
}

.mix-matches__result {
  flex: 1 1 auto;
}

.mix-matches__winner {
  font-weight: var(--weight-semibold);
}

.mix-matches__loser {
  color: var(--text-secondary);
}

.mix-matches__when {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
}

.mix-matches__delete-form {
  margin: 0;
  flex: 0 0 auto;
}

.mix-matches__delete {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.mix-matches__delete:hover {
  color: var(--action-destructive-fg);
}

/* --------------------------------------------------------------- pairings */

.mix-pairings {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mix-pairing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.mix-pairing__teams {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: 15px;
}

.mix-pairing__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.mix-pairing__elo {
  margin-left: var(--space-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.mix-pairing__vs {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
}

.mix-pairing__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.mix-pairing__actions form {
  margin: 0;
}

@media (max-width: 640px) {
  .mix-pairing {
    flex-direction: column;
    align-items: stretch;
  }
}

.mix-list__when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.mix-pairing__win {
  flex-shrink: 0;
}

.mix-team__nickname,
.mix-modal__nickname {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------ pool filter */

/* Links rather than buttons: the board re-fetches itself every few seconds, so
   a filter held in the DOM would be wiped on the next tick. Each chip re-loads
   the frame with its role toggled. */
/* The pool filter: a toggle that opens a panel anchored under it. Anchored in
   normal flow rather than the top layer, so it scrolls with the section. */
.mix-filter {
  position: relative;
}

.mix-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-smd);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

/* Safari still draws its own marker without this. */
.mix-filter__toggle::-webkit-details-marker {
  display: none;
}

.mix-filter__toggle:hover {
  background: var(--surface-sunk);
  border-color: var(--border-strong);
}

.mix-filter[open] > .mix-filter__toggle {
  background: var(--surface-sunk);
  border-color: var(--border-strong);
}

.mix-filter__icon {
  flex: none;
  color: var(--text-secondary);
}

.mix-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.mix-filter__panel {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 220px;
  padding: var(--space-md);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}

.mix-filter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
}

.mix-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.mix-filter__legend {
  padding: 0;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mix-filter__roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mix-filter__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}

.mix-filter__option input {
  margin: 0;
  flex: none;
}

.mix-filter__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-2xs);
  border-top: var(--border-width) solid var(--border-default);
}

.mix-filter__actions .button {
  flex: 1;
}

.mix-filter__clear {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.mix-filter__clear:hover {
  color: var(--text-primary);
}

/* Narrow screens have no room to hang a panel off the right edge. */
@media (max-width: 520px) {
  .mix-filter__panel {
    right: auto;
    left: 0;
  }
}


/* Stage switcher — an admin looking back at what an earlier stage looked like.
   Sits above the board because it changes what the whole board is showing. */
.mix-stages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
  align-self: flex-start;
}

.mix-stages__stage {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-smd);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.mix-stages__stage:hover {
  background: var(--surface-card);
  color: var(--text-primary);
}

.mix-stages__stage--on {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* Mint means live, the way it does everywhere else. */
.mix-stages__live {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-win);
}

.mix-preview {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
}

.mix-preview__text {
  margin: 0;
  color: var(--text-secondary);
}

.mix-preview__back {
  font-weight: 500;
  white-space: nowrap;
}

/* This round's draw. Read-only on the board — settling happens on the results
   page — so it stays a plain list rather than a row of controls. */
.mix-fixtures {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mix-fixtures__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.mix-fixtures__item--settled {
  background: var(--surface-sunk);
  color: var(--text-secondary);
}

.mix-fixtures__teams {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-weight: 500;
}

.mix-fixtures__vs {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mix-fixtures__state {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.mix-pairing--settled {
  background: var(--surface-sunk);
}

.mix-pairing__outcome {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-right: var(--space-sm);
}

/* Not open yet: recedes like a finished mix, because neither is happening now. */
.mix-list__status--scheduled {
  color: var(--text-tertiary);
}

.mix-page__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.mix-page__edit {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.mix-page__edit:hover {
  color: var(--text-primary);
}

/* Whose turn it is, on the admin's board. */
.mix-team--on-the-clock {
  border-color: var(--border-win);
  box-shadow: var(--shadow-sm);
}

.mix-team__clock {
  margin-left: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-win);
}

/* The night's log. Timestamps line up on the left so it scans as a column. */
.mix-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mix-log__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-xs) 0;
  border-bottom: var(--border-width) solid var(--border-default);
}

.mix-log__when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.mix-log__kind {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Signing up is the thing we're hoping for, so it gets the mint. */
.mix-log__kind--joined {
  color: var(--text-win);
}

.mix-log__subject {
  font-weight: 500;
}

.mix-log__detail {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}