/* browse.css
   The conference grid, the team grid and the team hero.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

/* ── Conference grid ────────────────────────────────────────────────── */
.conf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.conf-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  padding: 15px 16px; box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.16s, border-color 0.16s;
}
.conf-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.conf-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent-deep);
}
:root[data-theme="dark"] .conf-ic { color: var(--accent); }
.conf-ic svg { width: 19px; height: 19px; }
.conf-main { flex: 1; min-width: 0; }
.conf-name { font-size: 15px; font-weight: 680; letter-spacing: -0.01em; }
.conf-sub { font-size: 12px; color: var(--label-2); margin-top: 2px; }
/* The tracked count only appears once there is one — an empty conference should
   read as untouched, not as a zero. */
.conf-count {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; flex-shrink: 0;
}
.conf-chev { display: inline-flex; color: var(--label-3); flex-shrink: 0; }
.conf-chev svg { width: 16px; height: 16px; }
.conf-card:hover .conf-chev { color: var(--accent); }

/* ── Team grid ──────────────────────────────────────────────────────── */
/* Denser than the conference grid — a big conference is eighteen tiles, and they
   need to be scannable as a block rather than read one at a time. */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px;
}
.team-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  padding: 18px 12px 14px; box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.16s, border-color 0.16s;
}
.team-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.team-ic {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--label-3);
  transition: background 0.16s, color 0.16s;
}
.team-ic svg { width: 17px; height: 17px; }
/* A team with players tracked on it is the thing a coach is looking for in a grid
   of eighteen, so it carries the accent and the others stay quiet. */
.team-card.has-players .team-ic { background: var(--accent-light); color: var(--accent-deep); }
:root[data-theme="dark"] .team-card.has-players .team-ic { color: var(--accent); }
.team-name { font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em; line-height: 1.25; }
.team-count { font-size: 11.5px; color: var(--label-3); font-weight: 500; }
.team-card.has-players .team-count { color: var(--accent-deep); font-weight: 650; }
:root[data-theme="dark"] .team-card.has-players .team-count { color: var(--accent); }

/* ── Team hero ──────────────────────────────────────────────────────── */
.team-hero {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.team-hero-ic {
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(150deg, #ff8a80 0%, var(--accent) 54%, var(--accent-deep) 100%);
  box-shadow: 0 6px 20px rgba(255,87,87,0.32), inset 0 1px 0 rgba(255,255,255,0.26);
  position: relative; overflow: hidden;
}
.team-hero-ic svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.team-hero-ic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(255,255,255,0.24), transparent 48%); }
.team-hero-main { flex: 1; min-width: 0; }
.team-hero-main h1 { font-size: 24px; font-weight: 780; letter-spacing: -0.025em; line-height: 1.1; }
.team-hero-main p { font-size: 13px; color: var(--label-2); margin-top: 4px; }