/* Lobby Watch: lobbies view (design.md 5b). Scoped under .v-lobbies; layout only, colours come from tokens.
   Desktop (≥ 1024): games column 208 px | numbers column 128 px | pane. Below 1024 the columns are hidden and the
   pane is a drill-down. At ≥ 1280 the roster / bot column sits beside the chat. */

.v-lobbies {
  height: 100%;
  min-height: 0;
}
.v-lobbies .lb {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* ---- Columns ---------------------------------------------------------------------------------------------------- */

.v-lobbies .lb-games,
.v-lobbies .lb-nums {
  flex: none;
  display: none;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--rule-strong);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.v-lobbies .lb-games {
  width: 208px;
}
.v-lobbies .lb-nums {
  width: 128px;
}

.v-lobbies .lb-g,
.v-lobbies .lb-n {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
}
.v-lobbies .lb-g:hover,
.v-lobbies .lb-n:hover {
  background: var(--raised);
  text-decoration: none;
}
.v-lobbies .lb-g.is-sel,
.v-lobbies .lb-n.is-sel {
  background: var(--sel);
  box-shadow: inset 2px 0 0 var(--accent);
}
.v-lobbies .lb-g:focus-visible,
.v-lobbies .lb-n:focus-visible {
  outline-offset: -2px;
}

.v-lobbies .lb-g {
  height: 36px;
}
.v-lobbies .lb-g-n {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-lobbies .lb-g-r {
  margin-left: 8px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
  white-space: nowrap;
}
.v-lobbies .lb-g-c {
  width: 40px;
  flex: none;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text);
  text-align: right;
}

/* 128 px column. Spec geometry (16 px padding, 24 px number cell, 6 px glyph gap) leaves 59 px, and "Connecting" /
   "No account" at 12 px Plex need 66. A 20 px number cell and 12 px right padding give 73 px; the 16 px left edge
   stays aligned with the games column. */
.v-lobbies .lb-n {
  height: 32px;
  padding-right: 12px;
}
.v-lobbies .lb-n-n {
  width: 20px;
  flex: none;
  font-weight: 500;
}
.v-lobbies .lb-n .g {
  margin-right: 0;
}
.v-lobbies .lb-n-r {
  margin-left: auto;
  padding-left: 4px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v-lobbies .lb-n-r--word {
  font-size: var(--fs-meta);
}
.v-lobbies .lb-n-r .cd .mono {
  font-size: var(--fs-meta);
}

/* ---- Pane -------------------------------------------------------------------------------------------------------- */

.v-lobbies .lb-pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v-lobbies .lb-pane > .state {
  padding: 16px var(--gutter);
}

/* "All lobbies" and game panes scroll on their own. */
.v-lobbies .lb-all,
.v-lobbies .lb-game {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 24px;
}
.v-lobbies .lb-line {
  margin-top: -8px;
  margin-bottom: 16px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}

/* Desktop / drill-down copy variants. */
.v-lobbies .lb-drill {
  display: none;
}
.v-lobbies .back {
  display: none;
}

/* Game blocks with number strips */
.v-lobbies .lb-blk {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.v-lobbies .lb-blk:first-child {
  border-top: 0;
  padding-top: 0;
}
.v-lobbies .lb-blk-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
}
.v-lobbies .lb-blk-n {
  font-weight: 600;
}
.v-lobbies .lb-blk-s {
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}
.v-lobbies .lb-blk-strip {
  margin-top: 8px;
}

/* Game table */
.v-lobbies .lb-tbl {
  table-layout: fixed;
}
.v-lobbies .lb-tbl th:nth-child(1) { width: 18%; }
.v-lobbies .lb-tbl th:nth-child(2) { width: 22%; }
.v-lobbies .lb-tbl th:nth-child(3) { width: 72px; }
.v-lobbies .lb-tbl th:last-child  { width: 16%; }
.v-lobbies .lb-st {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}
.v-lobbies .lb-lm {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.v-lobbies .lb-lm-t {
  flex: none;
}
.v-lobbies .lb-lm .mc-line {
  flex: 1 1 auto;
  min-width: 0;
}
.v-lobbies .lb-ph-only {
  display: none;
}

/* ---- Lobby pane -------------------------------------------------------------------------------------------------- */

.v-lobbies .lb-lobby {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.v-lobbies .lb-head {
  flex: none;
  padding: 16px 24px 0;
}
/* The header line is as tall as the Go to time… input (32 px) from the start, so swapping the text buttons for the
   input doesn't move the h1 or the state sentence. */
.v-lobbies .lb-head .ph {
  margin-bottom: 0;
  min-height: 32px;
  align-items: center;
  row-gap: 8px;
}
.v-lobbies .lb-tc {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
}
/* The 28 px hit area (6.2) inside a 24 px layout slot: the padding is taken back with a negative margin, so the
   header line stays where it was and the tap target doesn't. */
.v-lobbies .lb-tc .tbtn {
  min-height: 28px;
  padding: 4px 0;
  margin: -2px 0;
}
.v-lobbies .lb-tc .tbtn.is-on {
  color: var(--text);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.v-lobbies .lb-goto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.v-lobbies .lb-goto .in {
  width: auto;
}
.v-lobbies .lb-state {
  margin-top: 4px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text-2);
}
.v-lobbies .lb-state .slot-sentence {
  display: inline;
}
.v-lobbies .lb-lastend {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
.v-lobbies .lb-head > :last-child {
  padding-bottom: 12px;
}

/* Past-time bar */
.v-lobbies .lb-past {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  min-height: 40px;
  padding: 4px 24px;
  background: var(--raised);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
  color: var(--text);
}
.v-lobbies .lb-past strong {
  font-weight: 600;
}
.v-lobbies .lb-past-s {
  flex: 1 1 auto;
  min-width: 0;
}
.v-lobbies .lb-past-c {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
}
.v-lobbies .lb-steps {
  display: flex;
  gap: 8px;
}
.v-lobbies .lb-past .tbtn {
  min-height: 24px;
  padding: 2px 0;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
}

/* Tabs row (below 1280) */
.v-lobbies .lb-tabs {
  flex: none;
  display: flex;
  align-items: stretch;
  height: 36px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
}
.v-lobbies .lb-tabs .tabs,
.v-lobbies .lb-side-t .tabs {
  min-height: 0;
  height: 100%;
}
.v-lobbies .lb-tabs .tab,
.v-lobbies .lb-side-t .tab {
  padding: 0;
}

/* Body: chat + (side column) */
.v-lobbies .lb-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.v-lobbies .lb-chat {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.v-lobbies .lb-chat-denied {
  padding: 8px 24px;
}
.v-lobbies .lb-ctl {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  min-height: 40px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
}
.v-lobbies .lb-kinds {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
}
.v-lobbies .lb-filter-w {
  display: flex;
  align-items: center;
  height: 40px;
}
.v-lobbies .lb-filter {
  width: 200px;
}
.v-lobbies .lb-ctl-r {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
  white-space: nowrap;
}
.v-lobbies .lb-chat .well {
  flex: 1 1 auto;
  min-height: 0;
}
.v-lobbies .well:focus-visible {
  outline-offset: -2px;
}
.v-lobbies .well .cl-start {
  padding-top: 4px;
}

/* Side column (≥ 1280) */
.v-lobbies .lb-side {
  display: none;
  flex: none;
  width: 280px;
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid var(--rule-strong);
}
.v-lobbies .lb-side-t {
  flex: none;
  display: flex;
  align-items: stretch;
  height: 36px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
}
.v-lobbies .lb-side-b {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Roster and bot panels (in the body below 1280, in the side column above) */
.v-lobbies .lb-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.v-lobbies .lb-roster {
  display: flex;
  flex-direction: column;
}
.v-lobbies .lb-roster[hidden] {
  display: none;
}
.v-lobbies .lb-rh {
  flex: none;
  display: flex;
  align-items: baseline;
  column-gap: 8px;
  height: 36px;
  padding: 8px 24px 0;
}
.v-lobbies .lb-rt {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: 600;
}
.v-lobbies .lb-cnt {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
/* "In lobby · 37", the same convention as section counts (.sec-n): 4 px either side of the dot. */
.v-lobbies .lb-cnt:not(:empty) {
  margin-left: -4px;
}
.v-lobbies .lb-cnt:not(:empty)::before {
  content: "·";
  margin-right: 4px;
}
.v-lobbies .lb-rsort {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.v-lobbies .lb-rsort .tbtn {
  min-height: 28px;
  padding: 4px 0;
  margin: -4px 0;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
}
.v-lobbies .lb-rb {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 24px 16px;
}
.v-lobbies .lb-rb > .state {
  padding: 4px 0;
}
.v-lobbies .lb-rl {
  margin: 0 -8px;
}
.v-lobbies .lb-rr {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  font-size: var(--fs-dense);
  line-height: var(--lh-dense);
}
.v-lobbies .lb-rr .pn {
  flex: 0 1 auto;
}
.v-lobbies .lb-rr-t {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
  white-space: nowrap;
}
.v-lobbies .lb-rr-t time {
  font-family: var(--mono);
  font-size: var(--fs-meta);
}
.v-lobbies .lb-left-h {
  margin: 16px 0 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 400;
  color: var(--text-3);
}
.v-lobbies .lb-rr--left,
.v-lobbies .lb-rr--left .pn {
  color: var(--text-3);
}
/* "left 2m ago" is a phrase, not a data token: Sans like every other relative time (3.3). */
.v-lobbies .lb-rr--left .lb-rr-t,
.v-lobbies .lb-rr--left .lb-rr-t time {
  font-family: var(--sans);
}

.v-lobbies .lb-bot {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 24px 16px;
}
.v-lobbies .lb-bot-note {
  margin-bottom: 8px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-3);
}
.v-lobbies .lb-bot-acts {
  margin-top: 16px;
}
.v-lobbies .lb-bot .err-line {
  margin-top: 8px;
}

/* ---- Breakpoints ------------------------------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .v-lobbies .lb-games,
  .v-lobbies .lb-nums {
    display: flex;
  }
  .v-lobbies .lb-nums[hidden] {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .v-lobbies .lb-desk {
    display: none;
  }
  .v-lobbies .lb-drill {
    display: inline;
  }
  .v-lobbies .back {
    display: inline-block;
  }
}

@media (min-width: 1280px) {
  .v-lobbies .lb-tabs {
    display: none;
  }
  .v-lobbies .lb-side {
    display: flex;
  }
  .v-lobbies .lb-side .lb-rh {
    padding-left: 16px;
    padding-right: 16px;
  }
  .v-lobbies .lb-side .lb-rb {
    padding-left: 16px;
    padding-right: 16px;
  }
  .v-lobbies .lb-side .lb-bot {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* In the 280 px side column the past-view range ("13:49 – still in") wraps under the name instead of eating it. */
  .v-lobbies .lb-side .lb-rr--past {
    flex-wrap: wrap;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .v-lobbies .lb-side .lb-rr--past .lb-rr-t {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 24px;
  }
}

@media (max-width: 719.98px) {
  .v-lobbies .lb-all,
  .v-lobbies .lb-game {
    padding: 16px var(--gutter);
  }
  .v-lobbies .lb-head {
    padding: 16px var(--gutter) 0;
  }
  .v-lobbies .lb-past {
    padding: 8px var(--gutter);
  }
  .v-lobbies .lb-past-s {
    flex-basis: 100%;
  }
  .v-lobbies .lb-tabs {
    padding: 0 var(--gutter);
  }
  .v-lobbies .lb-ctl {
    padding: 0 var(--gutter);
  }
  .v-lobbies .lb-filter-w {
    order: 9;
    flex: 1 1 100%;
    height: 36px;
    padding-bottom: 8px;
  }
  .v-lobbies .lb-filter {
    width: 100%;
  }
  .v-lobbies .lb-chat-denied {
    padding: 8px var(--gutter);
  }
  .v-lobbies .lb-rh {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .v-lobbies .lb-rb {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .v-lobbies .lb-bot {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .v-lobbies .lb-ph-only {
    display: inline;
  }
  .v-lobbies .lb-tbl {
    table-layout: auto;
  }
  .v-lobbies .lb-tbl td.lb-lm-c {
    max-width: none;
  }
  .v-lobbies .lb-lm .mc-line {
    display: inline;
  }
  .v-lobbies .lb-lm {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v-lobbies .lb-lm-t {
    margin-right: 8px;
  }
}