/* team: view-specific styles (keep small; prefer panel.css components) */
.tm-person{display:flex;align-items:center;gap:10px;min-width:0}
.tm-pt{min-width:0}
.tm-pt b{display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.tm-pt small{display:block;font-size:11.5px;color:var(--faint);white-space:nowrap}
.tm-self{height:18px;font-size:10.5px}
.tm-m{display:none}
.tm-role{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid var(--line2);color:var(--muted)}
.tm-role.r-owner{background:var(--acc-bg);border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent-text)}
.tm-role.r-admin{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent-text)}
.tm-role.r-licence{border-color:color-mix(in srgb,var(--info) 45%,transparent);color:var(--info)}
.tbl td.tm-go{width:36px;text-align:right}
.tbl td.tm-go span:where(.ic){width:16px;height:16px;vertical-align:middle}

/* notes and the one-time link */
.tm-note{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:9px;background:var(--info-bg);font-size:12.5px;line-height:1.45}
.tm-note span:where(.ic){width:16px;height:16px;flex:none;margin-top:1px;color:var(--info)}
.tm-note.warn{background:var(--warn-bg)}
.tm-note.warn span:where(.ic){color:var(--warn)}
.tm-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--line2);border-radius:9px;background:var(--panel2)}
.tm-link .mono{flex:1;min-width:0;word-break:break-all;user-select:all}
.tm-lead{margin:0;font-size:13px;line-height:1.5}
.tm-small{margin:0;font-size:12px}
/* Faz 5: the resellers' logins, their own section under the team */
p.tm-logins-note{margin:10px 16px 12px}

/* person drawer */
.tm-hero{display:flex;align-items:center;gap:12px}
.tm-hero b{display:block;font-size:15px;margin-bottom:5px}
.tm-hero .li-ico{width:44px;height:44px;border-radius:50%}
.tm-sec{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tm-sec h4{font-size:13px;font-weight:600}
.tm-sec p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tm-inline{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.tm-inline .select{flex:1;min-width:180px;width:auto}
.tm-diff{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.tm-diff p{margin:2px 0 0;color:var(--muted)}
.tm-diff span:where(.ic){width:14px;height:14px;flex:none}
/* a confirm or step-up opened over the person drawer also dims the drawer */
.tm-drawer ~ .scrim{z-index:61}

/* role matrix + rules */
.tm-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
.tm-grid .li .t small{line-height:1.45}
/* the matrix scrolls inside its own wrapper: its visually hidden cell texts (.sr, position:absolute) must be clipped by
   it, not by the page (else the page scrolls sideways on a phone) */
.tm-grid .tbl-wrap{position:relative}
.tm-matrix th,.tm-matrix td{padding:8px 12px}
.tm-matrix thead th{white-space:normal;vertical-align:bottom;line-height:1.3;letter-spacing:.05em}
.tm-matrix thead th small{display:block;font-size:10.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--faint);margin-top:2px}
.tm-matrix tbody th{font-size:12.5px;font-weight:400;color:var(--text);text-align:left;letter-spacing:0;text-transform:none;position:static;background:none;border-bottom:1px solid var(--line);padding:8px 12px;white-space:normal}
.tm-matrix tbody tr:last-child th{border-bottom:0}
.tm-matrix .c{text-align:center}
.tm-matrix td.yes span:where(.ic){width:16px;height:16px;color:var(--ok);vertical-align:middle}
.tm-matrix td.no{color:var(--faint)}

@media (max-width:1180px){.tm-grid{grid-template-columns:1fr}}
@media (max-width:900px){
  .tm-m{display:inline}
  .tm-matrix th,.tm-matrix td,.tm-matrix tbody th{padding:7px 6px}
  .tm-matrix thead th{font-size:10px;letter-spacing:.04em}
}
/* a phone: the five role columns fit a 390 px screen (narrower ones scroll inside the wrapper) */
@media (max-width:420px){
  .tm-matrix th,.tm-matrix td,.tm-matrix tbody th{padding:6px 3px}
  .tm-matrix thead th{font-size:9.5px;letter-spacing:0}
  .tm-matrix tbody th{font-size:11.5px}
}
/* the table never scrolls sideways: the person and e-mail columns take a share of the width and give way first, a long
   name or address cut with "…" (the whole one in its title and in the drawer); at 900 px and below the role and e-mail
   columns are hidden, the role follows the username and the address moves under it (.tm-em-m) */
.tbl td.tm-pc{max-width:0;width:34%}
.tbl td.tm-em{max-width:0;width:28%}
.tm-pt{overflow:hidden}
.tm-pt b{min-width:0}
.tm-nm,.tm-pt small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-email{display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap;min-width:0}
.tm-addr{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-ph{flex-basis:100%;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--faint)}
.tm-pt .tm-em-m{display:none}
@media (max-width:1180px){.tm-team .tbl th,.tm-team .tbl td{padding-left:9px;padding-right:9px}}
@media (max-width:900px){
  .tbl td.tm-pc{width:100%}
  .tm-pt .tm-em-m{display:block}
}