.team-page { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) 0 var(--space-24); }
.team-intro { max-width: 680px; margin-bottom: var(--space-12); }
.team-intro .eyebrow { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; }
.team-intro h1 { margin: var(--space-3) 0 var(--space-4); font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1; }
.team-intro > p:last-child { max-width: 56ch; color: var(--text-muted); font-size: var(--text-lg); }

.team-grid { display: grid; gap: var(--space-10); }
.team-role-group { display: grid; gap: var(--space-4); }
.team-group-label { margin: 0; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
/* A small team reads as sparse in a two-column list-plus-detail layout —
   there's nothing to fill the detail pane with until something is clicked,
   and a roster of two people leaves most of the page empty. Every card
   shown at once, full width on its own, uses that same space to actually
   say something about each person instead of just naming them. */
.team-role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); }

.team-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius));
  background: radial-gradient(140% 70% at 0% 0%, rgba(139, 92, 246, 0.08), transparent 60%), var(--surface);
  transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.team-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }

.team-card-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.team-card-head h2 { margin: 0 0 2px; font-size: var(--text-xl); }
.team-card-handle { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--text-sm); }

.team-avatar { position: relative; display: inline-flex; flex: 0 0 auto; }
.team-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-hi); }

/* Sized against the 64px card avatar specifically — big enough that the
   status reads at a glance without needing to lean in, but this is the
   only place a presence dot appears now: there's no separate small-avatar
   roster list any more for a second, smaller size to disagree with. */
.team-presence-dot { position: absolute; right: -2px; bottom: -2px; width: 19px; height: 19px; border: 3px solid #08080a; border-radius: 50%; background: #747f8d; box-sizing: border-box; }
.team-presence-dot.online { background: #43b581; }
.team-presence-dot.idle { background: #faa61a; }
.team-presence-dot.dnd { background: #f04747; }
.team-presence-dot.offline { background: #747f8d; }
.team-presence-dot.idle::after { content: ""; position: absolute; width: 10px; height: 10px; top: -2px; left: 3px; border-radius: 50%; background: #08080a; }
.team-presence-dot.dnd::after { content: ""; position: absolute; width: 7px; height: 3px; top: 3.5px; left: 1.75px; border-radius: 2px; background: #08080a; }

.team-role-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 999px;
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.12);
}
.team-card-note { margin: var(--space-4) 0 0; color: var(--text-muted); line-height: 1.7; }

/* Its own labeled block rather than tucked under the status line — a game
   and a Spotify track are both real content, not a footnote on "online". */
.team-activity-block {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-alt);
  display: grid;
  gap: 4px;
}
.team-activity-label { margin: 0 0 2px; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.team-activity { margin: 0; color: var(--text-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.team-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.team-status { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-muted); font-size: var(--text-sm); }
.team-status .team-presence-dot { position: static; display: inline-block; width: 9px; height: 9px; border-width: 0; }

@media (max-width: 760px) {
  .team-page { width: min(100% - 2rem, 600px); }
  .team-role-cards { grid-template-columns: 1fr; }
}