/* Lobby Watch: players (design.md 5a, the search home) and the player page (5a2). Scoped under .v-players and
   .v-player; layout only, never component colours. */

/* ---- Home: search, then two lists side by side at >= 1100 ------------------------------------------------------- */

.v-players .home-search {
  margin-bottom: 32px;
}
.v-players .ps-results,
.v-player .ps-results {
  margin-top: 24px;
}
.v-players .ps-results .tbl,
.v-player .ps-results .tbl {
  max-width: 800px;
}
.v-players .home-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.v-players .home-body > .sec + .sec {
  margin-top: 0;
}
@media (min-width: 1100px) {
  .v-players .home-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
.v-players .home-more {
  margin-top: 8px;
  min-height: 20px;
}
/* Full 28 px hit area in a 20 px line: the padding is taken back with a negative margin (6.2). */
.v-players .home-more .tbtn {
  min-height: 28px;
  padding: 4px 0;
  margin: -4px 0;
}
.v-players .tbl-online td.c-end,
.v-players .tbl-recent td.c-end {
  white-space: nowrap;
}

/* ---- Player page ------------------------------------------------------------------------------------------------- */

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

/* ---- Header block: 64 px head, name, uuid line ------------------------------------------------------------------ */

.v-player .pp-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.v-player .pp-id {
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 2px;
}
.v-player .pp-l1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 0;
  min-width: 0;
}
.v-player .pp-name {
  font-size: var(--fs-name);
  line-height: var(--lh-name);
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}
.v-player .pp-tracked {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-2);
  white-space: nowrap;
}
.v-player .pp-l2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  margin-top: 4px;
  min-width: 0;
}
.v-player .pp-uuid {
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.v-player .pp-l2 .tbtn {
  min-height: 28px;
  padding: 4px 0;
  margin: -4px 0;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
}
.v-player .pp-was {
  margin-top: 4px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}

/* ---- Status sentence ---------------------------------------------------------------------------------------------- */

.v-player .pp-status {
  margin-top: 16px;
}
.v-player .pp-status .lede {
  overflow-wrap: anywhere;
}
.v-player .pp-status .lede .g {
  vertical-align: 1px;
}
.v-player .pp-status .lede .nl {
  color: inherit;
}
.v-player .pp-open {
  margin-left: 16px;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.v-player .pp-meta {
  margin-top: 4px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}

/* ---- Facts row: label over value, hairline between pairs ---------------------------------------------------------- */

.v-player .pp-facts {
  margin-top: 24px;
}
.v-player .facts {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
}
.v-player .fact {
  padding: 0 16px;
  border-left: 1px solid var(--rule);
  min-width: 0;
}
.v-player .fact:first-child {
  padding-left: 0;
  border-left: 0;
}
.v-player .fact-l {
  display: block;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
  white-space: nowrap;
}
.v-player .fact-v {
  display: block;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--text);
  white-space: nowrap;
}

/* ---- Sections ------------------------------------------------------------------------------------------------------ */

.v-player .pp-act,
.v-player .pp-usual {
  margin-top: 32px;
}
.v-player .pp-usual[hidden] {
  display: none;
}
.v-player .pp-usual-line {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--text);
}
.v-player .pp-usual-tot {
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}

/* Hour-of-week rows (only drawn once there is a pattern): seven 16 px tracks ruled like the activity strip above, with
   only the busy hours filled. No lattice, no empty tiles. */
.v-player .hw {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  row-gap: 4px;
  margin-top: 12px;
}
.v-player .hw-r {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: 0;
  height: 16px;
  border-bottom: 1px solid var(--rule);
}
.v-player .hw-c {
  display: block;
  height: 8px;
  margin-top: 4px;
  background: transparent;
}
.v-player .hw-c--1 { background: var(--rule-strong); }
.v-player .hw-c--2 { background: var(--text-3); }
.v-player .hw-c--3 { background: var(--text-2); }
.v-player .hw-c--4 { background: var(--text); }
.v-player .hw .act-hours {
  margin-top: 2px;
}

/* ---- Body: chat left, history + names right ------------------------------------------------------------------------- */

.v-player .pp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 1100px) {
  .v-player .pp-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
.v-player .pp-main,
.v-player .pp-side {
  min-width: 0;
}

/* The chat well: bordered, no max height, the page scrolls. */
.v-player .pp-well {
  overflow: visible;
  min-height: 40px;
}
.v-player .pp-well > .state {
  padding: 8px 24px;
}
.v-player .pp-more {
  margin-top: 8px;
  min-height: 20px;
}
.v-player .pp-end {
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-3);
}
.v-player .pp-more .state--error {
  padding: 0;
}

/* Names: current name in --text 500, former names muted; the "current" word sits after the name. */
.v-player .pp-nm {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* ---- Never seen (404): the home search, then results ------------------------------------------------------------- */

.v-player .pp-q {
  overflow-wrap: anywhere;
}
.v-player .pp-search {
  margin-top: 16px;
}

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

@media (max-width: 719.98px) {
  .v-player .facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .v-player .fact {
    padding: 0;
    border-left: 0;
  }
  .v-player .fact-v {
    white-space: normal;
  }
  .v-player .pp-open {
    display: block;
    margin: 4px 0 0;
  }
  .v-player .pp-well > .state {
    padding: 8px 16px;
  }
  /* Lobby history row blocks read "Joined – Left" on line 2, not "Joined · Left". */
  .v-player .hist tbody tr > td.c-meta ~ td.c-meta::before {
    content: " – ";
  }
}