/* Lobby Watch: bots and accounts (design.md 5d). Layout only: the summary sentence parts, needs-attention rows, the
   two tables and their phone reflow. Colours and type come from tokens through the shared component classes. */

.v-bots .stack > * + * {
  margin-top: 32px;
}
.v-bots .sec {
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

/* ---- Bots -------------------------------------------------------------------------------------------------------- */

.v-bots .bots-lede {
  max-width: none;
}
.v-bots .bots-lede + .err-line {
  margin-top: 4px;
}
.v-bots .bots-lede + .err-line:empty + .stack,
.v-bots .bots-lede + .err-line:not(:empty) + .stack {
  margin-top: 32px;
}
/* A part of the summary sentence: a text button in the sentence's own type. Its class gives it its colour. */
.v-bots .part {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.v-bots .part:hover {
  text-decoration: underline 1px currentColor;
  text-underline-offset: 3px;
}

/* Needs attention: MSA blocks, then plain rows. */
.v-bots .att .sec-b > .msa + .msa {
  margin-top: 12px;
}
.v-bots .att .sec-b > .msa + .att-row {
  margin-top: 12px;
}
.v-bots .att-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  min-height: 36px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.v-bots .att-row .att-t {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.v-bots .att-row .acts {
  margin-left: auto;
}
.v-bots .att-row .err-line {
  flex: 1 1 100%;
}
.v-bots .msa-l3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
}
.v-bots .msa-l4 {
  margin-top: 4px;
}
.v-bots .msa-l4:empty {
  display: none;
}
.v-bots .msa-l4 .btns {
  margin-top: 4px;
}
.v-bots .msa-exp {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
.v-bots .msa .err-line {
  margin-top: 4px;
}

/* Lobbies table */
.v-bots .filter-line {
  padding: 4px 0 8px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}
.v-bots .filter-line .tbtn {
  min-height: 0;
  padding: 0;
  margin-left: 4px;
  font-size: var(--fs-dense);
}
.v-bots .tbl-slots td.c-end,
.v-bots .tbl-accounts td.c-end {
  white-space: nowrap;
}
.v-bots .tbl-slots .st,
.v-bots .tbl-accounts .st {
  vertical-align: middle;
}
.v-bots .ph-only {
  display: none;
}

/* Accounts filter row: 12 px under the section rule, 12 px above the table. */
.v-bots .acc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0 12px;
}
.v-bots .acc-filter input.in {
  width: 240px;
}
.v-bots .acc-filter select.in {
  width: auto;
}

/* Storage: one definition line. */
.v-bots .storage {
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}

/* ---- Phones ------------------------------------------------------------------------------------------------------- */

@media (max-width: 719.98px) {
  .v-bots .acc-filter input.in {
    width: 100%;
  }
  .v-bots .ph-only {
    display: inline;
  }
  .v-bots .desk-only {
    display: none;
  }
  /* Line 2 of a lobby row reads "Account · Players · For · Fails" (5d), so For and Fails move after Players and the
     " · " separator moves with them. */
  .v-bots .tbl-slots tbody tr > td.c-meta.o-for {
    order: 5;
  }
  .v-bots .tbl-slots tbody tr > td.c-meta.o-fails {
    order: 6;
  }
  .v-bots .tbl-slots tbody tr > td.c-meta.o-acc::before,
  .v-bots .tbl-slots tbody tr > td.c-meta.o-players::before {
    content: none;
  }
  /* Players follows Account visually; it only takes a dot when the account cell is actually shown. */
  .v-bots .tbl-slots tbody tr > td.c-meta.o-acc:not(:has(> .is-empty:only-child)) ~ td.c-meta.o-players::before,
  .v-bots .tbl-slots tbody tr > td.c-meta.o-for::before,
  .v-bots .tbl-slots tbody tr > td.c-meta.o-fails::before {
    content: " · ";
    white-space: pre;
  }
  .v-bots .att-row .acts {
    margin-left: 0;
    flex: 1 1 100%;
  }
  .v-bots .msa-code {
    overflow-wrap: anywhere;
  }
}