/* Copyright Ayers Electronics Inc. All rights reserved. */

/* ---- who is signing in, the joining word, the network they are signing in to ---- */
/* One row in the network group, left to right: the face with the label over the name, the joining
   word, then the network over its address. It reads at a television's distance without competing
   with the code, which stays the card's hero. The columns arrive with the name: a set carrying no
   profile keeps the network's own single column, exactly as it reads without one. */

.gate-to-row {
  display: grid;
  align-items: center;
}

.gate-to-row[data-who="yes"] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  padding: 2px 0;
}

.gate-profile {
  display: flex;
  align-items: center;
}
.gate-profile > * + * {
  margin-left: 10px;
}

/* The joining word: quiet, tracked wide, in a pill so it reads as the join and not as a third name. */
.gate-to {
  justify-self: center;
  font-size: var(--type-label);
  letter-spacing: 0.24em;
  color: var(--accent-text);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* The picture keeps its own 44 px box, so the ring grows outward around it and a row without one
   measures exactly as it did. */
.gate-profile-mark {
  display: block;
  flex: 0 0 auto;
  border-radius: var(--radius-round);
}

.gate-profile-face {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  border: 1px solid var(--border);
  background: var(--elevated);
  object-fit: cover;
}

.gate-profile-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gate-profile-label {
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.gate-profile-name {
  font-size: var(--type-body);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The network reads back towards the word it is joined to, its own small label over the name. */
.gate-server-label {
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.gate-to-row[data-who="yes"] .gate-server {
  align-items: flex-end;
  text-align: right;
}

/* A television reads the network as a column inside this row - the name over its address - rather
   than the single baseline line the group carries on its own. */
html[data-tv] .gate-to-row .gate-server {
  flex-direction: column;
  align-items: flex-start;
}

html[data-tv] .gate-to-row[data-who="yes"] .gate-server {
  align-items: flex-end;
}