/* ============================================================
   transmissions — view: roster
   The full cast board: search field + responsive grid of
   vertical mini member cards. Layers on base.css.
   Owned by view: signals (roster).
   ============================================================ */

/* ---------------------------------------------------------- */
/* 1 · Scaffold + header                                       */
/* ---------------------------------------------------------- */

.ros-wrap {
  max-width: 880px;
  margin-inline: auto;
}

.ros-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.ros-h {
  font-size: var(--fs-subhead);
  font-weight: 600;
  letter-spacing: var(--tracking-head);
  line-height: 1.02;
}

.ros-count {
  color: var(--fg-faint);
}

/* ---------------------------------------------------------- */
/* 2 · Search                                                  */
/* ---------------------------------------------------------- */

.ros-search {
  position: relative;
  margin-bottom: var(--s-5);
}

.ros-search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--fg-faint);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease-out);
}

.ros-search:focus-within .ros-search-icon {
  color: var(--accent-70);
}

.ros-search-input {
  padding-left: 44px;
  padding-right: 52px;
  border-radius: var(--r-pill);
}

.ros-search-input::-webkit-search-cancel-button {
  display: none;
}

.ros-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: var(--fg-dim);
}

.ros-search-clear:active {
  transform: translateY(-50%) scale(0.88);
}

.ros-search-clear svg {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------- */
/* 3 · The grid                                                */
/* ---------------------------------------------------------- */

.ros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.ros-empty {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------- */
/* 4 · Member cards                                            */
/* ---------------------------------------------------------- */

.ros-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--s-6) var(--s-4) var(--s-5);
  border-radius: var(--r-l);
  text-align: center;
  transition: background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-med) var(--ease-glide),
    box-shadow var(--t-med) var(--ease-out);
}

.ros-card:hover {
  background: rgba(26, 26, 34, 0.78);
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.ros-card:hover .ros-name {
  color: var(--accent);
}

.ros-card:active {
  transform: scale(0.97);
}

.ros-card:focus-visible {
  outline: 2px solid var(--accent-70);
  outline-offset: 2px;
}

.ros-no {
  position: absolute;
  top: 10px;
  right: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-ghost);
}

.ros-face {
  position: relative;
  margin-bottom: 2px;
}

.ros-onair {
  position: absolute;
  right: 2px;
  bottom: 2px;
  border: 2px solid #0c0c11;
  box-sizing: content-box;
}

.ros-name {
  max-width: 100%;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease-out);
}

.ros-handle {
  max-width: 100%;
}

.ros-card .tier {
  margin-top: 4px;
}

.ros-pull {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}

/* ---------------------------------------------------------- */
/* 5 · Skeletons                                               */
/* ---------------------------------------------------------- */

.ros-skel {
  border-radius: var(--r-l);
  min-height: 190px;
}

/* ---------------------------------------------------------- */
/* 6 · Desktop refinements                                     */
/* ---------------------------------------------------------- */

@media (min-width: 720px) {
  .ros-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
  }

  .ros-search {
    max-width: 420px;
  }
}