/* Tracked players (#/tracked). Layout only: widths, gaps and phone stacking. Colours and type come from the shared
   classes (.in .btn .tbtn .tbl .sec .st .ok-line .err-line) and the tokens. */

.v-tracked {
  max-width: 1280px;
}

/* Header: h1, then the count line 4 px below it, 16 px to the content. */
.v-tracked .tr-head {
  margin-bottom: 16px;
}
.v-tracked .tr-line {
  margin-top: 4px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}

/* "Add player" / "Add keyword" rows: one flex row that wraps, 12 px gaps, a hairline under, 16 px to the table. */
.v-tracked .tr-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.v-tracked .tr-add-l {
  font-weight: 600;
  white-space: nowrap;
}
.v-tracked .tr-add .in {
  width: 200px;
}
.v-tracked .tr-add .in--note,
.v-tracked .tr-add .in--pattern {
  width: 280px;
}
.v-tracked .tr-add .err-line {
  flex-basis: 100%;
}

/* Section intro line (keywords, alerts). */
.v-tracked .tr-desc {
  margin-bottom: 12px;
  max-width: 72ch;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}
.v-tracked .tr-desc code {
  font-size: var(--fs-meta);
}

/* Sections after the tracked list. */
.v-tracked > .sec {
  margin-top: 32px;
}
/* The keywords form sits inside a section: no extra hairline needed under it, the table header has one. */
.v-tracked .sec .tr-add {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 8px;
}

/* Status cell: an inline run (glyph, lobby link, time) that keeps its spaces. */
.v-tracked .tr-st {
  white-space: nowrap;
}
.v-tracked .tr-st .g {
  margin-right: 6px;
}

/* Row actions: right-aligned on desktop. The tracked list's Remove is a .c-end cell (line 1's right on phones); the
   keywords table's Remove is a .c-act cell (its own line, left, on phones). The error line sits under the button. */
.v-tracked .tbl td.c-act,
.v-tracked .tbl td.c-end {
  text-align: right;
}
.v-tracked .tr-acts {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}
.v-tracked .tr-acts .err-line {
  white-space: normal;
  text-align: right;
}

/* Setting row: checkbox, label, then "Saved." after it. */
.v-tracked .tr-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (max-width: 719.98px) {
  .v-tracked .tr-add .in,
  .v-tracked .tr-add .in--note,
  .v-tracked .tr-add .in--pattern {
    width: 100%;
  }
  .v-tracked .tr-add-l {
    flex-basis: 100%;
  }
  /* The tracked list's Remove is a .c-end cell on phones (line 1, right of the name); it shrinks before the name does
     and its error line wraps under it instead of widening the row. The keywords table keeps its .c-act line. */
  .v-tracked .tbl td.c-end {
    flex: 0 1 auto;
    min-width: 0;
  }
  .v-tracked .tbl td.c-end .tr-acts {
    max-width: 100%;
  }
  .v-tracked .tbl td.c-act {
    text-align: left;
  }
  .v-tracked .tbl td.c-act .tr-acts {
    align-items: flex-start;
  }
  .v-tracked .tbl td.c-act .tr-acts .err-line {
    text-align: left;
  }
  /* The note is clipped by the row block itself; the desktop .clip max-width would give it zero width here. */
  .v-tracked .tbl td.c-sub.clip {
    max-width: none;
  }
  /* A row without a note doesn't keep an empty note line. */
  .v-tracked .tbl td.c-sub:empty {
    display: none;
  }
  .v-tracked .tr-st {
    white-space: normal;
  }
}