/* Your team (public/js/team.js, docs/DESIGN.md "Team") and a shared repo's actions (share.js).
     .team-invite       the Invite someone form: email, name, project, what they can do
     .team-kinds        a grid: one column per kind (Pages, To-dos, Repos, Activity, About), a row per project or person
     .team-lvl          one None / See / Edit select in it
     .team-mail         the invite email before it goes: To, From, Subject, the text, Send / Copy link
     .team-person       one person: initials, name, role, Remove from team, then their projects
     .share-repos       a shared repo's row: Open in Codespaces, Download ZIP, Open on GitHub, Clone
     .sync-own          Settings, Account: your own sync service */
.team { display: grid; gap: var(--sp-5); }
.team h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.team-invite, .team-mail, .team-person { padding: var(--sp-4); border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--bg-raised); display: grid; gap: var(--sp-3); }
.team-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-3); }
.team-row label, .team-add { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--fg-muted); }
.team-kinds { display: grid; gap: var(--sp-1); overflow-x: auto; }
.team-kinds-head, .team-kinds-row { display: grid; grid-template-columns: minmax(8rem, 1.4fr) repeat(5, minmax(5rem, 1fr)) auto; gap: var(--sp-2); align-items: center; }
.team-kinds-head span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); }
.team-kinds-row { padding: var(--sp-1) 0; }
.team-kinds-row + .team-kinds-row { border-top: 1px solid var(--border-faint); }
.team-kinds-row .dot { display: inline-block; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; }
.team-lvl select { width: 100%; }
.team-person-head { display: flex; align-items: center; gap: var(--sp-3); }
.team-mail { border-color: var(--info); }
.team-mail-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.team-mail-head dt { color: var(--fg-muted); }
.team-mail-head dd { margin: 0; overflow-wrap: anywhere; }
.team-mail-text { margin: 0; max-height: 16rem; overflow: auto; padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-hover); font: var(--fs-sm)/1.5 var(--font-body); white-space: pre-wrap; }
.team-mail-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.share-repos { list-style: none; margin: 0; padding: 0; display: grid; }
.share-repos li { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; }
.share-repos li + li { border-top: 1px solid var(--border-faint); }
.share-repo-acts { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.share-repo-acts a { text-decoration: none; }
.share-invite--in { box-shadow: inset 3px 0 0 var(--info); }
.sync-own { margin-top: var(--sp-5); }
.invite-paste { margin-top: var(--sp-5); flex-wrap: wrap; align-items: center; }
.invite-paste label { flex: 1 1 100%; font-size: var(--fs-sm); color: var(--fg-muted); }
.invite-paste input { flex: 1; min-width: 14rem; }
.sync-own summary { cursor: pointer; color: var(--fg-muted); font-size: var(--fs-sm); }
.sync-own form { margin-top: var(--sp-2); }
@media (max-width: 760px) { .team-row { grid-template-columns: 1fr; } }