/* Companions friend list. Reuses shared chrome: .dash-* tiles (admin-dashboard),
   the UNSCOPED .nl-* rail/toolbar (news-admin), .bf-filters-rail / .bf-table shells. */
.companions-screen {
  display: flex; flex-direction: column;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
}

/* Collapse mechanics are the UNSCOPED .nl-kpi-* rules in components/list-screen.css, which also
   own the one-per-row phone rule at three classes — it out-ranks the single class below. */
/* Four tiles on ONE row: the shared 1fr 1fr wrapped them 2x2 and spent 236px of a 926px-wide
   screen on four two-digit numbers. */

.companions-screen .cp-main { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1024px) {
  .companions-screen .cp-layout {
    grid-template-columns: 1fr;
  }
}

.cp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: cp-dot-pulse 2s ease-in-out infinite;
}
@keyframes cp-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .cp-dot { animation: none; } }

/* Reuses .bf-table / .bf-table-scroll / .bf-open-foot from the battlefield. */
.cp-list { overflow: hidden; }
/* The add panel hangs out of the frame, and the corner clip would cut it off. */
.cp-list.cp-add-open { overflow: visible; }
.bf-table.cp-table { min-width: 620px; }
.bf-table.cp-table.is-compact { min-width: 0; }
.cp-list-foot { padding: 12px 16px; border-top: 1px solid var(--divider); }
.cp-table tbody tr.is-playing td:first-child { box-shadow: inset 3px 0 0 var(--bronze); }

/* Fill and glyph colour come from .avatar-chip/.avatar-<color> in layout.css. */
.cp-av {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
}
.cp-name-static {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600;
  color: var(--ink);
}
.cp-name {
  all: unset; cursor: pointer;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid transparent;
  display: inline-block; max-width: 100%; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-name:hover { color: var(--bronze-2); border-bottom-color: currentColor; }
.cp-name:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
.cp-table tbody tr:hover .cp-name { color: var(--bronze-2); }

.cp-rating { color: var(--ink); font-weight: 600; white-space: nowrap; }
.cp-elo { color: var(--ink-3); font-size: 0.8rem; }
.cp-stars-cell { white-space: nowrap; }
.cp-stars { color: var(--bronze-2); font-size: 0.72rem; letter-spacing: 2px; white-space: nowrap; }

.cp-table.is-compact .cp-col-opt { display: none; }

.cp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink-2);
  white-space: nowrap;
}
.cp-pill-online {
  background: color-mix(in srgb, var(--laurel) 14%, transparent);
  border-color: color-mix(in srgb, var(--laurel) 40%, transparent);
  color: var(--laurel-2);
}
.cp-pill-battle {
  background: color-mix(in srgb, var(--laurel) 10%, transparent);
  border-color: color-mix(in srgb, var(--laurel) 55%, transparent);
  color: var(--laurel-2);
}
.cp-pill-offline { color: var(--ink-3); }

/* Button min-width comes from the shared .bf-table td .btn rule. */
.cp-row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

.cp-x {
  all: unset; cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px;
  display: inline-grid; place-items: center;
  color: var(--ink-3); font-size: 0.8rem;
  transition: color 0.12s, background 0.12s;
}
.cp-x:hover { color: var(--porphyry-2); background: var(--bg-2); }
.cp-x:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }

/* Mount stays in the DOM (so a mutation can repaint it) but collapses out of the gap when empty. */
#cp-reqs-mount:empty { display: none; }
.cp-reqs { overflow: hidden; }
.cp-req {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--divider);
}
.cp-req:last-child { border-bottom: 0; }
.cp-req.is-out { opacity: 0.8; }
.cp-req-when { margin-left: 4px; }
.cp-req-actions { margin-left: auto; display: flex; gap: 8px; }

/* Transparent and click-through so the companion list stays readable and usable behind it;
   only the dialog takes pointer events (same pattern as .go-inline-overlay). */
/* The add panel hangs from its own button, the clan invite menu's shape. */
.cp-add-wrap { position: relative; display: inline-flex; }
.cp-dialog {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 460px; max-width: 92vw;
  background: var(--bg-1); border: 1px solid var(--bronze); border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  padding: 16px 18px 18px;
  text-align: left;
}
/* Below desktop the button is far narrower than the panel, so the panel head is the anchor —
   it drops under the tools row at card width and cannot overflow either edge. */
@media (max-width: 640px) {
  .companions-screen .bf-open-head { position: relative; }
  .cp-add-wrap { position: static; }
  .cp-dialog {
    top: calc(100% + 6px); left: 0; right: 0;
    width: auto; max-width: none;
    max-height: 70vh; overflow-y: auto;
  }
}
.cp-dialog-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.cp-dialog-head .cp-x { cursor: pointer; }
.cp-dialog-title { font-family: var(--font-display); font-size: 1.1rem; }
.cp-dialog-head .cp-x { opacity: 1; margin-left: auto; }
.cp-add-search input { width: 100%; }
.cp-add-results { margin-top: 12px; max-height: 46vh; overflow-y: auto; }
.cp-add-note { padding: 14px 4px; text-align: center; }
.cp-add-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--divider);
}
.cp-add-row:last-child { border-bottom: 0; }
.cp-add-row .cp-name-static { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* At-the-cap pill, in the panel head beside the filters toggle. Amber, not red: the list is
   intact and the player has two ways forward — it is a limit, not a failure. */
.cp-cap-note {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--gold) 10%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
  border-radius: var(--radius-m);
  color: var(--ink-2);
  font-size: 0.8rem; line-height: 1.2;
  /* The anchor .field-info-pop measures from — the ⓘ is a SIBLING of the count, so the box
     around both is what the popover aligns to. */
  position: relative;
}
.cp-cap-count { font-variant-numeric: tabular-nums; font-weight: 700; }