/* Admin team page (admin/team.js, #team) and the role badge beside the account name (admin/admin.js).
   Storybook skin of theme.css / kit.css. Controls are at least 40 px tall; at 600 px and below the
   tables become cards (each cell shows its column name). */
.account-role{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px solid #e0b25c;background:#fff3d6;color:#8a5a08;font-size:11px;font-weight:700;vertical-align:middle;white-space:nowrap}
.account-role[data-role="owner"]{border-color:#8fc27a;background:#e8f5df;color:#2f6b22}
.account-role[data-role="content"]{border-color:#9db7de;background:#e9f0fb;color:#2c4f80}
.pm-reason{display:block;margin:0 0 12px;font-size:12.5px;color:#735738}
.pm-reason input{display:block;width:100%;margin-top:4px}

.team-page{min-width:0;color:#5c493d}
.team-page *{min-width:0;box-sizing:border-box}
.team-page h3{margin:18px 0 8px;color:#4a3828;font-size:16px}
.team-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 16px}
.team-head>div:first-child{flex:1 1 280px}
.team-head p{margin:5px 0 0;color:#6e5845;font-size:12.5px;line-height:1.55}
.team-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.team-page button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:7px;font-size:13px;line-height:1.3;cursor:pointer;white-space:normal;text-align:center}
.team-page button .icon{width:18px;height:18px}
.team-page button:disabled{cursor:default;opacity:.5}
.team-page button.danger{color:#9b2d20;border-color:#e2a59b}

.team-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) auto;gap:10px;align-items:end;padding:14px 16px;border:1px solid #e3cfb2;border-radius:10px;background:#fffdf8}
.team-field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#735738}
.team-field input,.team-field select{width:100%;min-height:40px}
.team-label{font-weight:600}
.team-actions{display:flex;gap:6px}
.team-note{margin:8px 0 0;font-size:12px}

.team-table,.team-matrix-table{width:100%;border-collapse:collapse}
.team-table th,.team-table td,.team-matrix-table th,.team-matrix-table td{padding:8px 10px;border-bottom:1px solid #eadcc5;text-align:left;vertical-align:middle;font-size:13px}
.team-row-actions{display:flex;flex-wrap:wrap;gap:6px}
.team-role{display:inline-flex;padding:2px 10px;border-radius:999px;border:1px solid #d8c4a4;background:#fffaf2;font-size:12.5px;font-weight:700;white-space:nowrap}
.team-role-owner{border-color:#8fc27a;background:#e8f5df;color:#2f6b22}
.team-role-gm{border-color:#e0b25c;background:#fff3d6;color:#8a5a08}
.team-role-content{border-color:#9db7de;background:#e9f0fb;color:#2c4f80}
.team-matrix-table td{text-align:center;font-weight:700}
.team-matrix-table th small{font-weight:400;font-size:11px;overflow-wrap:anywhere}

@media (max-width:600px){
 .team-add{grid-template-columns:1fr}
 .team-actions,.team-actions button,.team-row-actions button{width:100%}
 .team-table thead,.team-matrix-table thead{display:none}
 .team-table,.team-table tbody,.team-table tr,.team-table td,.team-matrix-table,.team-matrix-table tbody,.team-matrix-table tr,.team-matrix-table th,.team-matrix-table td{display:block;width:100%}
 .team-table tr,.team-matrix-table tr{margin:0 0 10px;padding:10px 12px;border:1px solid #e3cfb2;border-radius:10px;background:#fffdf8}
 .team-table td,.team-matrix-table td{border:0;padding:4px 0;text-align:left}
 .team-table td[data-label]:not([data-label=""])::before,.team-matrix-table td[data-label]::before{content:attr(data-label) ' · ';color:#6e5845;font-weight:400}
 .team-matrix-table th{border:0;padding:0 0 4px}
}