/* Team activity (8 Oct 2026), owner only: one card per person, a pending-invite notice, recent sign-ins.
   Classic look uses the theme tokens (light and dark); body.face adds the navy glass and warm gold. */
.team-sub { flex: 1; } /* a class, not an inline style, so the shared phone rule (.topbar .muted: full row) still wins */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin: 4px 0 18px; }
.team-card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; display: grid; gap: 6px; align-content: start; position: relative; overflow: hidden; min-width: 0; }
.team-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), transparent 70%); opacity: .7; }
.team-card.is-online { border-color: rgba(63, 174, 120, .45); }
.team-card.is-online::after { background: linear-gradient(90deg, var(--ok, #3fae78), transparent 70%); }
.team-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.team-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-name { font-family: var(--display); font-size: 23px; font-weight: 700; line-height: 1.1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-online { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok, #3fae78); white-space: nowrap; }
.team-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #3fae78); box-shadow: 0 0 0 3px rgba(63, 174, 120, .2); }
.team-seen { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.team-line { font-size: 13.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.team-line b { color: var(--text-3); font-weight: 600; }
.team-none { color: var(--text-3); font-style: italic; }
.team-spark-wrap { margin: 6px 0 2px; }
.team-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.team-spark i { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--gold-2), var(--gold)); opacity: .9; }
.team-spark i.zero { background: var(--line-strong); opacity: .7; }
.team-spark i.today:not(.zero) { opacity: 1; box-shadow: 0 0 0 1px var(--gold-2); }
.team-spark-k { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); letter-spacing: .04em; margin-top: 3px; }
.team-never { margin: 0 0 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-left: 4px solid var(--gold); border-radius: var(--radius); color: var(--text-2); font-size: 13.5px; }
.team-never b { color: var(--text); }
.team-never ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.team-never-name { color: var(--text); font-weight: 600; }
.team-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.team-recent tbody tr { cursor: default; }
.team-recent td.team-when { white-space: nowrap; }

@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; gap: 10px; }
  .team-card { padding: 14px 14px 12px; }
  .team-name { font-size: 21px; }
  .team-recent th, .team-recent td { padding: 9px 10px; }
  .team-recent th:nth-child(4), .team-recent td:nth-child(4) { display: none; } /* "How" is the least useful column on a phone */
}

/* ---- the wine-dark sea ------------------------------------------------------------------- */
body.face .team-card { background: linear-gradient(180deg, rgba(20, 30, 54, .86), rgba(14, 22, 42, .8)); border-color: var(--edge); border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); animation: face-rise .62s var(--rise) backwards; }
body.face .team-card::after { background: linear-gradient(90deg, #e2b85a, transparent 70%); opacity: .85; }
body.face .team-card.is-online { border-color: rgba(63, 174, 120, .42); box-shadow: var(--shadow), 0 0 0 1px rgba(63, 174, 120, .12) inset; }
body.face .team-card.is-online::after { background: linear-gradient(90deg, #3fae78, transparent 70%); }
body.face .team-grid > :nth-child(2) { animation-delay: 60ms; } body.face .team-grid > :nth-child(3) { animation-delay: 120ms; } body.face .team-grid > :nth-child(n+4) { animation-delay: 180ms; }
body.face .team-name { color: #f4ecd6; }
body.face .team-line b { color: rgba(226, 184, 90, .78); }
body.face .team-dot { box-shadow: 0 0 0 3px rgba(63, 174, 120, .18), 0 0 10px rgba(63, 174, 120, .7); }
body.face .team-spark { border-bottom-color: rgba(226, 184, 90, .18); }
body.face .team-spark i { background: linear-gradient(180deg, #f0cf78, #b98a2e); box-shadow: 0 0 8px rgba(226, 184, 90, .22); }
body.face .team-spark i.zero { background: rgba(140, 160, 210, .2); box-shadow: none; }
body.face .team-spark i.today:not(.zero) { box-shadow: 0 0 0 1px #e2b85a, 0 0 10px rgba(226, 184, 90, .5); }
body.face .team-never { background: rgba(14, 22, 42, .8); border-color: var(--edge); border-left-color: #e2b85a; border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.face .team-never b, body.face .team-never-name { color: #f4ecd6; }