/* Formas de magia (docs/FORMAS.md, docs/DESIGN.md): Perfil › Magia with the forms of the active spell, the Tibia
   spell icons, what each form gains (green) and loses (red), and the comparison in the Treino. Only the colours of the
   Bestiary Arena skin. */
.sf-pad{padding:6px}
.sf-icon{flex:none}
.sf-chip{display:inline-flex;align-items:center;gap:3px;color:#e4ca78;white-space:nowrap}
.sf-frags{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.sf-spell{display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:center;padding:6px}
.sf-spell b{color:#fff;font-weight:normal}.sf-spell small{display:block;color:#a9a9a9;line-height:13px}
.sf-forms{display:grid;gap:4px;padding:6px}
.sf-form{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:2px 8px;align-items:center;width:100%;min-width:0;text-align:left;white-space:normal;line-height:13px;padding:5px 6px;
 border:1px solid #111;background:#1c1c1c;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#c0c0c0}
.sf-form>.sf-icon{grid-row:span 2}
.sf-form b{color:#fff;font-weight:normal;overflow-wrap:anywhere}.sf-form em{font-style:normal;color:#a9a9a9;text-align:right;white-space:nowrap}
.sf-form.is-sel{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}.sf-form.is-sel b,.sf-form.is-sel em{color:#e8c547}
.sf-form.is-locked{opacity:.65}
.sf-delta,.sf-req,.sf-list{display:flex;flex-wrap:wrap;gap:2px 8px}
.sf-delta,.sf-req{grid-column:2/-1}
.sf-good{color:#5fc85f}.sf-bad{color:#e8756c}
.sf-req span{color:#e8756c;display:inline-flex;align-items:center;gap:3px}.sf-req span.ok{color:#5fc85f}
.sf-bars{display:grid;gap:5px;margin-bottom:6px}
.sf-bars>div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:6px;align-items:center;color:#c0c0c0}
.sf-bars>div>span:nth-child(2){display:grid;gap:2px}
.sf-bars i{display:block;height:6px;background:#e8c547;border:1px solid #000}
.sf-bars i.is-group{background:#5fc85f}
.sf-bars>div>span:last-child{color:#fff;white-space:nowrap}
#sf-outcome .ba-outcome{position:fixed}
#sf-outcome .ba-outcome-window{width:min(340px,100%)}
#sf-outcome .ba-outcome-banner{text-align:center}
#sf-outcome .ba-outcome-banner strong{font-size:16px;line-height:18px}
#sf-outcome .ba-outcome-actions{flex-wrap:wrap}
#sf-outcome .ba-outcome-actions button{flex:1 1 auto;min-width:0;white-space:normal}
/* Profile tabs: six (Magia last), three and three on a phone. */
#detail .profile-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:520px){
 #detail .profile-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 #detail .profile-nav button:nth-child(n){grid-column:auto}
}
#sf-tab .pf-head{display:flex;align-items:center;gap:6px}
#sf-tab .pf-head small{margin-left:auto;display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap}